@evolve.ui/core-components 1.1.0 → 1.2.0

package/{Table-M-rANdMt.mjs.map → Table-CQGtDpvH.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Table-M-rANdMt.mjs","names":[],"sources":["../src/Table/sharedState.ts","../src/Table/components/TableShadow/TableShadow.tsx","../src/Table/components/TableHeader/TableHeader.tsx","../src/Table/components/TablePagination/components/ItemCountDisplay/ItemCountDisplay.tsx","../src/Table/components/TablePagination/components/ItemCountSelect/ItemCountSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/components/PageSelect/PageSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/TablePaginator.tsx","../src/Table/components/TablePagination/TablePagination.tsx","../src/Table/components/TableRow/components/TableRowCell/TableRowCell.tsx","../src/Table/components/TableRow/TableRows.tsx","../src/Table/Table.tsx"],"sourcesContent":["import { atom } from 'jotai';\nimport { createContext } from 'react';\n\ntype TableStatics = {\n    actionable: boolean;\n    backgroundColor: string | undefined;\n    hideDividers: boolean;\n    onSelectedRowsChange?: (selectedRows: string) => void;\n    pageSizeOptions: number[];\n    showColumnDividers: boolean;\n    stickyFirstColumn: boolean;\n};\n\nexport const emptyTableStatics: TableStatics = {\n    actionable: false,\n    backgroundColor: undefined,\n    hideDividers: false,\n    pageSizeOptions: [],\n    showColumnDividers: false,\n    stickyFirstColumn: false,\n};\n\nexport const tableStaticsContext = createContext<TableStatics>(emptyTableStatics);\n\n/**\n * This should be the manually sorted column key.\n *\n * It is not guaranteed to match the true sorting of the table.\n */\nexport const sortedColumnKey = atom<string | undefined>(undefined);\n","import { cn } from '@evolve.ui/theme-system';\nimport { atom, useAtomValue } from 'jotai';\nimport { useContext } from 'react';\n\nimport { tableStaticsContext } from '../../sharedState';\nimport { actionableWidth } from '../../sharedStyles';\n\nexport const showLeftStickyShadowAtom = atom<boolean>(false);\nexport const leftStickyShadowWidthAtom = atom<number>(0);\n\n/**\n * This component adds the left hand shadow to the table element for the sticky first column.\n */\nexport const TableShadow = () => {\n    const { actionable, stickyFirstColumn } = useContext(tableStaticsContext);\n    const width = useAtomValue(leftStickyShadowWidthAtom);\n    const showLeftStickyShadow = useAtomValue(showLeftStickyShadowAtom);\n\n    return (\n        <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n            <div\n                className={cn(\n                    'pointer-events-none absolute bottom-0 left-0 top-0 opacity-100 shadow-04 transition-opacity duration-300',\n                    {\n                        'opacity-0': !stickyFirstColumn || !showLeftStickyShadow,\n                    }\n                )}\n                style={{ width: `${actionable ? width + actionableWidth : width}px` }}\n            />\n        </div>\n    );\n};\n\nexport const observeFirstColumnWidth = (setLeftShadowWidth: (width: number) => void) => (ref: HTMLElement | null) => {\n    if (ref) {\n        // Add a resize observer to the first column to determine the width of the left shadow.\n        const resizeObserver = new ResizeObserver((entries) => {\n            const width = entries[0].contentRect.width;\n            setLeftShadowWidth(width);\n        });\n\n        resizeObserver.observe(ref);\n\n        setLeftShadowWidth(ref.getBoundingClientRect().width);\n    }\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useSetAtom } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { ArrowUp } from '../../../Icons';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle } from '../../types';\nimport { leftStickyShadowWidthAtom, observeFirstColumnWidth } from '../TableShadow/TableShadow';\n\ninterface Props<T extends StaticData> {\n    actionableCheckbox: ReactNode;\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    currentSort?: [string, SortType];\n    data: T[];\n    defaultSortDirection: SortType;\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    showTopScrollHint: boolean;\n    sortable: boolean;\n    stickyHeader: boolean;\n}\n\nexport function TableHeader<T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    columns,\n    currentSort,\n    defaultSortDirection,\n    onSortChange,\n    showTopScrollHint,\n    sortable,\n    stickyHeader,\n}: Props<T>) {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const setLeftShadowWidth = useSetAtom(leftStickyShadowWidthAtom);\n\n    const tableBackgroundColor: TableBackgroundStyle =\n        backgroundColor === 'transparent' && stickyHeader ? 'primary' : 'transparent';\n\n    return (\n        <thead>\n            <tr\n                className={cn('relative border-b border-border-primary', {\n                    // BACKGROUND COLOR\n                    'bg-background-primary': tableBackgroundColor === 'primary',\n                    'bg-transparent': tableBackgroundColor === 'transparent',\n                    'shadow-01': stickyHeader && showTopScrollHint,\n                    // STICKY HEADER\n                    'sticky top-0 z-[5]': stickyHeader,\n                })}\n                style={{\n                    transition: stickyHeader ? '0.25s' : undefined,\n                }}\n            >\n                {actionable && (\n                    <th\n                        className={cn(\n                            'hui-text-label-strong bg-background-primary p-0 transition-colors duration-200',\n                            {\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                            }\n                        )}\n                        key=\"actionable\"\n                        scope=\"col\"\n                        style={\n                            stickyFirstColumn\n                                ? {\n                                      left: 0,\n                                      paddingLeft: '14px',\n                                      position: 'sticky',\n                                      zIndex: 1,\n                                  }\n                                : {}\n                        }\n                    >\n                        {actionableCheckbox}\n                    </th>\n                )}\n                {columns.map((column, i) => {\n                    const newDirection =\n                        currentSort && currentSort[0] === column.key\n                            ? currentSort[1] === 'ascending'\n                                ? 'descending'\n                                : 'ascending'\n                            : defaultSortDirection;\n\n                    let ariaSort: undefined | 'none' | 'ascending' | 'descending' = undefined;\n\n                    if (currentSort && currentSort[0] === column.key) {\n                        ariaSort = currentSort[1];\n                    } else if (column.sortable) {\n                        ariaSort = 'none';\n                    }\n\n                    const isFirstColumn = i === 0;\n                    const isStickyFirstColumn = stickyFirstColumn && isFirstColumn;\n\n                    return (\n                        <th\n                            aria-sort={ariaSort}\n                            className={cn('hui-text-label-strong relative p-0 transition-colors duration-200', {\n                                'active:bg-background-pressed': sortable && column.sortable,\n                                // BACKGROUND COLOR\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                // SORTABLE STATES\n                                'group cursor-pointer': sortable && column.sortable,\n                                'hover:bg-background-hover': sortable && column.sortable,\n                                // STICKY FIRST COLUMN\n                                'sticky z-[1] shadow-02': isStickyFirstColumn,\n                            })}\n                            // Using the index as the key is fine here because the columns won't change.\n                            key={i}\n                            onClick={\n                                sortable && column.sortable && onSortChange\n                                    ? () => onSortChange(column.key as string, newDirection)\n                                    : undefined\n                            }\n                            ref={i === 0 ? observeFirstColumnWidth(setLeftShadowWidth) : undefined}\n                            scope=\"col\"\n                            style={\n                                isStickyFirstColumn\n                                    ? {\n                                          left: actionable ? '48px' : '0',\n                                          transform: 'translateX(-1px)',\n                                      }\n                                    : {}\n                            }\n                        >\n                            <span\n                                className={cn('flex items-center gap-xs whitespace-nowrap px-sm', {\n                                    'justify-end': column.align === 'right',\n                                    'justify-start': column.align !== 'right',\n                                })}\n                            >\n                                {column.header ?? null}\n                                {sortable && column.sortable && (\n                                    <ArrowUp\n                                        className={cn('transition-all duration-200', {\n                                            'group-hover:rotate-0': ariaSort === 'descending',\n                                            'group-hover:rotate-180': ariaSort === 'ascending',\n                                            // HOVER STATE - Show on hover for unsorted columns\n                                            'group-hover:visible group-hover:opacity-100': ariaSort === 'none',\n                                            // DEFAULT STATE - Hidden for unsorted columns\n                                            'invisible opacity-0': ariaSort === 'none',\n                                            // ASCENDING STATE - Always visible, rotate on hover\n                                            'visible opacity-100': ariaSort === 'ascending',\n                                            // DESCENDING STATE - Always visible and rotated, rotate back on hover\n                                            'visible rotate-180 opacity-100': ariaSort === 'descending',\n                                        })}\n                                        size=\"sm\"\n                                    />\n                                )}\n                            </span>\n                        </th>\n                    );\n                })}\n            </tr>\n        </thead>\n    );\n}\n","import { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\n\nexport const ItemCountDisplay = () => {\n    const { itemCount, page, pageSize } = usePagination();\n\n    if (pageSize === 'all') {\n        return <BodyPrimary>{itemCount} Items</BodyPrimary>;\n    }\n\n    return (\n        <BodyPrimary>{`${(page - 1) * pageSize + 1} - ${Math.min(\n            page * pageSize,\n            itemCount\n        )} of ${itemCount} Items`}</BodyPrimary>\n    );\n};\n","import { useContext, useMemo } from 'react';\n\nimport { usePagination } from '../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../Select/Select';\nimport { tableStaticsContext } from '../../../../sharedState';\n\nexport const ItemCountSelect = () => {\n    const { pageSize, setPageSize } = usePagination();\n    const { pageSizeOptions } = useContext(tableStaticsContext);\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=\"w-[232px]\"\n            defaultValue={pageSize}\n            isInsideLabel\n            labelText=\"Items per page:\"\n            onChange={(event?: OptionType) => setPageSize(event?.value)}\n            options={generatedOptions}\n            small\n            usePortalMenu\n            value={{ label: pageSize, value: pageSize.toString() }}\n        />\n    );\n};\n","import { useMemo } from 'react';\n\nimport { usePagination } from '../../../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../../../Select/Select';\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            defaultValue={pageCount}\n            isInsideLabel\n            labelText=\"Page\"\n            onChange={(event?: OptionType) => goToPage(event?.value)}\n            options={options}\n            small\n            usePortalMenu\n            value={options[page - 1]}\n        />\n    );\n};\n","import { IconButton } from '../../../../../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../../../../../Icons';\nimport { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\nimport { PageSelect } from './components/PageSelect/PageSelect';\n\nexport const Pagination = () => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    return (\n        <div className=\"flex items-center\">\n            <IconButton\n                aria-label=\"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 pl-xs pr-sm\">of {pageCount} pages</BodyPrimary>\n            <IconButton\n                aria-label=\"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 { ItemCountDisplay } from './components/ItemCountDisplay/ItemCountDisplay';\nimport { ItemCountSelect } from './components/ItemCountSelect/ItemCountSelect';\nimport { Pagination } from './components/TablePaginator/TablePaginator';\n\nexport const TableControls = () => {\n    return (\n        <div\n            className=\"flex items-center justify-between pt-4\"\n            data-hui-id=\"TableControls\"\n        >\n            <ItemCountSelect />\n            <ItemCountDisplay />\n            <Pagination />\n        </div>\n    );\n};\n\nTableControls.displayName = 'TableControls';\n","import { cn } from '@evolve.ui/theme-system';\nimport { useContext } from 'react';\n\nimport { BodySecondary } from '../../../../../Typography/Text/Text';\nimport { tableStaticsContext } from '../../../../sharedState';\nimport { ColumnType, StaticData } from '../../../../types';\n\ninterface Props<T extends StaticData> {\n    backgroundColor: 'primary' | 'secondary' | 'subdued' | 'disabled' | 'transparent';\n    column: ColumnType<T>;\n    columnIndex: number;\n    item: T;\n}\n\nexport const TableRowCell = <T extends StaticData>({ backgroundColor, column, columnIndex, item }: Props<T>) => {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const value = item[column.key];\n\n    return (\n        <td\n            className={cn('whitespace-nowrap px-sm py-0', {\n                'bg-background-disabled': backgroundColor === 'disabled',\n                'bg-background-primary': backgroundColor === 'primary',\n                'bg-background-secondary': backgroundColor === 'secondary',\n                'bg-background-subdued': backgroundColor === 'subdued',\n                'bg-transparent': backgroundColor === 'transparent',\n                // COLUMN DIVIDER\n                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                //   HOVER\n                'group-hover:bg-surface-200 group-active:bg-surface-300': !item.disabled,\n                // Add relative positioning for sticky columns to support the background fix\n                relative: stickyFirstColumn && columnIndex === 0,\n                // For non-actionable tables, first column can be at left-0\n                'sticky left-0 z-[2]': stickyFirstColumn && columnIndex === 0 && !actionable,\n                // For actionable tables, first column should be positioned after the checkbox (48px width)\n                'sticky left-xl z-[2]': stickyFirstColumn && columnIndex === 0 && actionable,\n                'sticky-column': stickyFirstColumn && columnIndex === 0,\n                'text-left': !column.align || column.align === 'left',\n                'text-right': column.align === 'right',\n            })}\n        >\n            {Boolean(column.renderItem) ? (\n                column.renderItem?.(item, column)\n            ) : (\n                <BodySecondary color={Boolean(item.disabled) ? 'disabled' : 'primary'}>{value as string}</BodySecondary>\n            )}\n        </td>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport { Checkbox } from '../../../ChoiceListItem';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, StaticData, TableBackgroundStyle } from '../../types';\nimport { TableRowCell } from './components/TableRowCell/TableRowCell';\n\ninterface Props<T extends StaticData> {\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    data: T[];\n    selectedRows?: Set<T['key']>;\n    zebraStripes: boolean;\n}\n\nexport const TableRows = <T extends StaticData>({\n    backgroundColor = 'primary',\n    columns,\n    data,\n    selectedRows,\n    zebraStripes,\n}: Props<T>) => {\n    const { actionable, hideDividers, onSelectedRowsChange, showColumnDividers, stickyFirstColumn } =\n        useContext(tableStaticsContext);\n\n    const onRowClick = useCallback(\n        (event: MouseEvent<HTMLTableRowElement>) => {\n            if (actionable) {\n                const checkbox = event.currentTarget.querySelector('input[type=\"checkbox\"]') as HTMLElement | undefined;\n\n                checkbox?.click();\n            }\n        },\n        [actionable]\n    );\n\n    const formattedData = useMemo(() => {\n        return data.map((item) => {\n            const renderedColumns = columns.map((column, columnIndex) => (\n                <TableRowCell\n                    backgroundColor={backgroundColor}\n                    column={column}\n                    columnIndex={columnIndex}\n                    item={item}\n                    key={`table-row-cell-${columnIndex}`}\n                />\n            ));\n\n            const isOdd = data.indexOf(item) % 2 !== 0;\n            const shouldShowZebraStripe = zebraStripes && isOdd;\n            const isSelectedNotDisabled = selectedRows && selectedRows.has(item.key) && !item.disabled;\n\n            return (\n                <tr\n                    // BASE\n                    className={cn(\n                        'group relative cursor-default bg-background-primary',\n\n                        //  BACKGROUND COLORS\n                        {\n                            'bg-background-disabled': backgroundColor === 'disabled',\n                            'bg-background-primary': backgroundColor === 'primary' && !zebraStripes,\n                            'bg-background-secondary': backgroundColor === 'secondary',\n                            'bg-background-subdued': backgroundColor === 'subdued',\n                            'bg-transparent': backgroundColor === 'transparent',\n                        },\n                        {\n                            '[&>td]:bg-background-disabled': backgroundColor === 'disabled' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-inverse/[0.03]':\n                                backgroundColor === 'transparent' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-secondary': backgroundColor === 'secondary' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-subdued':\n                                (backgroundColor === 'primary' || backgroundColor === 'subdued') &&\n                                shouldShowZebraStripe,\n                        },\n                        {\n                            // HIGHLIGHTED - exclude sticky columns since they handle their own states\n                            '!bg-background-secondary [&>td]:bg-background-secondary': isSelectedNotDisabled,\n\n                            // DIVIDERS\n                            'border-b border-border-secondary': !hideDividers,\n                            // ACTIONABLE\n                            'cursor-pointer': actionable && !item.disabled,\n                        }\n                    )}\n                    data-disabled={item.disabled ? 'true' : undefined}\n                    key={item.key}\n                    onClick={onRowClick}\n                >\n                    {actionable && (\n                        <td\n                            className={cn(\n                                'bg-background-primary p-0',\n                                {\n                                    // COLUMN DIVIDER\n                                    'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                    // Direct hover/active states for sticky column\n                                    'group-hover:!bg-surface-200 group-active:!bg-surface-300': !item.disabled,\n                                    'sticky left-0 z-[3]': stickyFirstColumn,\n                                    'sticky-column': stickyFirstColumn,\n                                },\n                                {\n                                    // Selected state for sticky column\n                                    'bg-background-secondary':\n                                        stickyFirstColumn &&\n                                        selectedRows &&\n                                        selectedRows.has(item.key) &&\n                                        !item.disabled,\n                                }\n                            )}\n                            key=\"actionable\"\n                            onClick={(e) => e.stopPropagation()}\n                        >\n                            <Checkbox.Option\n                                checked={selectedRows ? selectedRows.has(item.key) : false}\n                                className={cn('flex h-full w-xl items-center justify-center', {\n                                    'group-hover:[&>svg]:!bg-surface-200 group-active:[&>svg]:!border-border-hover':\n                                        !item.disabled,\n                                })}\n                                disabled={Boolean(item.disabled)}\n                                onChange={() => {\n                                    onSelectedRowsChange?.(item.key);\n                                }}\n                            />\n                        </td>\n                    )}\n                    {renderedColumns}\n                </tr>\n            );\n        });\n    }, [\n        actionable,\n        backgroundColor,\n        columns,\n        data,\n        hideDividers,\n        onRowClick,\n        onSelectedRowsChange,\n        selectedRows,\n        showColumnDividers,\n        stickyFirstColumn,\n        zebraStripes,\n    ]);\n\n    return <tbody>{formattedData}</tbody>;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { Provider, useSetAtom } from 'jotai';\nimport { ComponentProps, ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { Loading } from '../Loading/Loading';\nimport { AdvancedPagination, PaginationProvider } from '../Pagination';\nimport { BodySecondary, H3 } from '../Typography/Text/Text';\nimport { TableHeader } from './components/TableHeader/TableHeader';\nimport { TableControls } from './components/TablePagination/TablePagination';\nimport { TableRows } from './components/TableRow/TableRows';\nimport { showLeftStickyShadowAtom, TableShadow } from './components/TableShadow/TableShadow';\nimport { tableStaticsContext } from './sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle, TableRowDensity } from './types';\n\ntype Props<T extends StaticData> = {\n    /**\n     * Adds a checkbox to the left of each row and in the header.\n     * When checked, the row is considered selected.\n     *\n     * @see `onSelectedRowsChange`\n     */\n    actionable?: boolean;\n    /**\n     * This checkbox goes in the top left of your table.\n     *\n     * You can use this to \"select all\" however you'd like.\n     *\n     * Needs `actionable` to be true to show.\n     */\n    actionableCheckbox?: ReactNode;\n    /**\n     * Background color style for the table.\n     * Options: 'primary', 'secondary', 'subdued', 'disabled', or 'transparent'.\n     *\n     * primary - Uses theme.color.background.primary\n     * secondary - Uses theme.color.background.secondary\n     * subdued - Uses theme.color.background.subdued\n     * disabled - Uses theme.color.background.disabled\n     * transparent - Uses transparent background\n     *\n     * @default 'primary'\n     */\n    backgroundColor?: TableBackgroundStyle;\n    className?: string;\n    /**\n     * Specification for the columns of the table.\n     * Includes how to render each item in the column.\n     */\n    columns: ColumnType<T>[];\n    /**\n     * Whether we're currently sorting by anything, and if so, what.\n     *\n     * The first item in the tuple is the column key, and the second is the sort direction.\n     *\n     * @see `onSortChange`\n     */\n    currentSort?: undefined | [string, SortType];\n    /**\n     * The rows of data to be displayed in the table.\n     */\n    data: T[];\n    /**\n     * The default sort direction for columns that are sortable.\n     */\n    defaultSortDirection?: SortType;\n    /**\n     * The text to display when there is no data.\n     */\n    emptyStateHeaderText?: string;\n    /**\n     * The supporting text to display when there is no data.\n     */\n    emptyStateSupportingText?: string;\n    /**\n     * Whether or not to fill the width of the container.\n     *\n     * Gives equal extra space to each column.\n     */\n    fillHorizontal?: boolean;\n    /**\n     * Whether or not to show the border on the main table.\n     */\n    hideBorder?: boolean;\n    /**\n     * Whether or not to hide the dividers between rows.\n     */\n    hideDividers?: boolean;\n    /**\n     * Boolean to use advance pagination component\n     */\n    isAdvancedPagination?: boolean;\n    /**\n     * Whether or not to show a loading indicator.\n     */\n    loading?: boolean;\n    /**\n     * Callback when the selected rows change.\n     *\n     * @param selectedRows the selected rows in the form of a map of row keys to booleans\n     */\n    onSelectedRowsChange?: (selectedRow: T['key']) => void;\n    /**\n     * Callback when the sort status of a column changes.\n     *\n     * @param columnKey The key of the column that was clicked\n     * @param newSort The new sort status of the column\n     * @see `currentSort`\n     */\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    /**\n     * The page size options for the pagination component.\n     */\n    pageSizeOptions?: number[];\n    /**\n     * If provided, the table will add a pagination component.\n     *\n     * @see `PaginationProvider`\n     */\n    pagination?: Omit<ComponentProps<typeof PaginationProvider>, 'path' | 'children'> & {\n        /**\n         * The key of the pagination provider.\n         *\n         * This is used to ensure that the pagination provider is only re-rendered when the key changes.\n         * @example key={`${currentPage}-${pageSize}-${itemCount}`}\n         */\n        key?: string;\n    };\n    /**\n     * The height of the rows in the table.\n     * - `sm` = 28px\n     * - `md` = 36px\n     * - `lg` = 48px\n     *\n     * @default md\n     */\n    rowDensity?: TableRowDensity;\n    /**\n     * The rows that are currently selected.\n     *\n     * This is a controlled prop.\n     */\n    selectedRows?: Set<T['key']>;\n    /**\n     * Adds vertical dividers between columns in both header and body cells,\n     * including the actionable checkbox column. Combine with the default row\n     * dividers (`hideDividers={false}`) and outer border (`hideBorder={false}`)\n     * for a fully bordered grid.\n     *\n     * @default false\n     */\n    showColumnDividers?: boolean;\n    /**\n     * Whether or not the columns are sortable.\n     *\n     * @see `onSortChange`\n     * @see `currentSort`\n     */\n    sortable?: boolean;\n    /**\n     * Locks the first column on horizontal scroll.\n     */\n    stickyFirstColumn?: boolean;\n    /**\n     * Make header sticky when table height is set.\n     *\n     * @default false\n     *\n     * .table-container {\n     *   height: calc(100vh - 200px);\n     * }\n     */\n    stickyHeader?: boolean;\n    /**\n     * Adds a zebra stripe to every other row.\n     */\n    zebraStripes?: boolean;\n};\n\n/**\n * Helper function to get background color classes based on TableBackgroundStyle\n */\nconst getBackgroundColorClasses = (backgroundColor?: TableBackgroundStyle, isZebraStripe = false) => {\n    if (!backgroundColor) {\n        return 'bg-background-primary';\n    }\n\n    switch (backgroundColor) {\n        case 'secondary':\n            return 'bg-background-secondary';\n        case 'subdued':\n            return 'bg-background-subdued';\n        case 'disabled':\n            return 'bg-background-disabled';\n        case 'transparent':\n            return 'bg-transparent';\n        case 'primary':\n            if (isZebraStripe) {\n                return 'bg-background-subdued';\n            }\n            return 'bg-background-primary';\n        default:\n            return 'bg-background-primary';\n    }\n};\n\nexport const Table = <T extends StaticData>({\n    actionable = false,\n    backgroundColor,\n    hideDividers = false,\n    isAdvancedPagination,\n    onSelectedRowsChange,\n    pageSizeOptions = [25, 50, 100],\n    showColumnDividers = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    ...props\n}: Props<T>) => {\n    const hasNoData = Boolean(props.loading) || !Boolean(props.data.length);\n\n    // Memoize the context value to prevent unnecessary re-renders\n    const contextValue = useMemo(\n        () => ({\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn: stickyFirstColumn && !hasNoData,\n        }),\n        [\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn,\n            hasNoData,\n        ]\n    );\n\n    // We need a jotai provider to isolate tables from one another.\n    return (\n        <Provider>\n            <tableStaticsContext.Provider value={contextValue}>\n                <InnerTable\n                    backgroundColor={backgroundColor}\n                    data-hui-id=\"Table\"\n                    hasNoData={hasNoData}\n                    hideDividers={hideDividers}\n                    isAdvancedPagination={isAdvancedPagination}\n                    stickyFirstColumn={stickyFirstColumn}\n                    stickyHeader={stickyHeader}\n                    {...props}\n                />\n            </tableStaticsContext.Provider>\n        </Provider>\n    );\n};\n\n// react dev tools display name\nTable.displayName = 'Table';\n\nconst InnerTable = <T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    className,\n    columns,\n    currentSort,\n    data,\n    defaultSortDirection = 'descending',\n    emptyStateHeaderText = 'Empty state heading message...',\n    emptyStateSupportingText = 'Supporting message to provide further guidance on how to remedy empty state.',\n    fillHorizontal = false,\n    hasNoData,\n    hideBorder = false,\n    hideDividers = false,\n    isAdvancedPagination,\n    loading = false,\n    onSortChange,\n    pagination,\n    rowDensity = 'md',\n    selectedRows,\n    sortable = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    zebraStripes = false,\n}: Props<T> & {\n    hasNoData: boolean;\n}) => {\n    const [showRightScrollHint, setShowRightScrollHint] = useState(false);\n    const [showLeftScrollHint, setShowLeftScrollHint] = useState(false);\n    const [showTopScrollHint, setShowTopScrollHint] = useState(false);\n    const setShowLeftShadow = useSetAtom(showLeftStickyShadowAtom);\n\n    const handleScroll = useCallback(\n        (ref: HTMLDivElement) => {\n            setShowLeftShadow(stickyFirstColumn && ref.scrollLeft > 20);\n            setShowLeftScrollHint(!stickyFirstColumn && ref.scrollLeft > 50);\n            setShowRightScrollHint(ref.scrollLeft + ref.clientWidth < ref.scrollWidth - 50);\n            setShowTopScrollHint(ref.scrollTop !== 0);\n        },\n        [setShowLeftShadow, stickyFirstColumn]\n    );\n\n    let rowHeight = 0;\n    switch (rowDensity) {\n        case 'sm':\n            rowHeight = 28;\n            break;\n        case 'md':\n            rowHeight = 36;\n            break;\n        case 'lg':\n            rowHeight = 48;\n            break;\n        default:\n            rowHeight = 36;\n            break;\n    }\n\n    // Container classes\n    const containerClasses = cn(\n        'relative max-w-full',\n        {\n            'w-full': fillHorizontal,\n            'w-min': !fillHorizontal,\n        },\n        className,\n        'table-container'\n    );\n\n    // RelativeContainer classes\n    const relativeContainerClasses = cn(\n        'relative',\n        {\n            'border border-border-secondary': !hideBorder,\n            'border-b-0': !hideDividers && !hasNoData && !hideBorder,\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // TableScroll classes\n    const tableScrollClasses = cn(\n        'w-full',\n        {\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'min-h-[220px]': loading || data.length === 0,\n            'overflow-x-auto': !hasNoData,\n            'overflow-x-hidden': hasNoData,\n            'overflow-y-auto': stickyHeader,\n            'overflow-y-visible': !stickyHeader,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // Table classes\n    const tableClasses = cn(\n        'border-collapse',\n        {\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor),\n        // Row height styles using CSS custom properties for dynamic values\n        '[&_td]:h-[var(--row-height)] [&_th]:h-[var(--row-height)]',\n        // Background color for th and td elements\n        {\n            '[&_th]:bg-background-disabled': backgroundColor === 'disabled',\n            '[&_th]:bg-background-primary': backgroundColor === 'primary' || !backgroundColor,\n            '[&_th]:bg-background-secondary': backgroundColor === 'secondary',\n            '[&_th]:bg-background-subdued': backgroundColor === 'subdued',\n            '[&_th]:bg-transparent': backgroundColor === 'transparent',\n        },\n        // Scroll hint shadows using pseudo-elements\n        '[&::before]:pointer-events-none [&::before]:absolute [&::before]:z-[1] [&::before]:content-[\"\"]',\n        '[&::before]:bottom-0 [&::before]:left-0 [&::before]:top-0 [&::before]:w-[48px]',\n        '[&::before]:opacity-0 [&::before]:transition-opacity [&::before]:duration-200',\n        '[&::before]:shadow-[8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::before]:opacity-100': showLeftScrollHint && !hasNoData,\n        },\n        '[&::after]:pointer-events-none [&::after]:absolute [&::after]:z-[1] [&::after]:content-[\"\"]',\n        '[&::after]:bottom-0 [&::after]:right-0 [&::after]:top-0 [&::after]:w-[48px]',\n        '[&::after]:opacity-0 [&::after]:transition-opacity [&::after]:duration-200',\n        '[&::after]:shadow-[-8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::after]:opacity-100': showRightScrollHint && !hasNoData,\n        }\n    );\n\n    // Empty state container classes\n    const emptyStateContainerClasses = cn(\n        'absolute flex w-full flex-col items-center justify-center py-2xl text-center'\n    );\n\n    return (\n        <div\n            className={containerClasses}\n            style={{ '--row-height': `${rowHeight}px` } as React.CSSProperties}\n        >\n            <div className={relativeContainerClasses}>\n                <div\n                    className={tableScrollClasses}\n                    ref={(ref: HTMLDivElement | null) => {\n                        if (!ref) {\n                            return;\n                        }\n\n                        // Add a scroll event listener to the table scroll container\n                        // to determine if the right scroll hint should be shown\n                        ref.addEventListener('scroll', () => {\n                            handleScroll(ref);\n                        });\n\n                        handleScroll(ref);\n                    }}\n                >\n                    <table className={tableClasses}>\n                        <TableHeader\n                            actionableCheckbox={actionableCheckbox}\n                            backgroundColor={backgroundColor}\n                            columns={columns}\n                            currentSort={currentSort}\n                            data={data}\n                            defaultSortDirection={defaultSortDirection}\n                            onSortChange={onSortChange}\n                            showTopScrollHint={showTopScrollHint}\n                            sortable={sortable}\n                            stickyHeader={stickyHeader}\n                        />\n\n                        {!loading && Boolean(data.length) && (\n                            <TableRows\n                                backgroundColor={backgroundColor}\n                                columns={columns}\n                                data={data}\n                                selectedRows={selectedRows}\n                                zebraStripes={zebraStripes}\n                            />\n                        )}\n                    </table>\n                    {!hasNoData && <TableShadow />}\n\n                    {!loading && !Boolean(data.length) && (\n                        <div className={emptyStateContainerClasses}>\n                            <H3>{emptyStateHeaderText}</H3>\n                            <BodySecondary>{emptyStateSupportingText}</BodySecondary>\n                        </div>\n                    )}\n\n                    {loading && (\n                        <div className={emptyStateContainerClasses}>\n                            <Loading size={32} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {pagination && !hasNoData && (\n                <PaginationProvider\n                    {...pagination}\n                    key={pagination.key}\n                    path=\"\"\n                >\n                    {isAdvancedPagination ? <AdvancedPagination className=\"px-0 py-sm\" /> : <TableControls />}\n                </PaginationProvider>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Table-CQGtDpvH.mjs","names":[],"sources":["../src/Table/sharedState.ts","../src/Table/components/TableShadow/TableShadow.tsx","../src/Table/components/TableHeader/TableHeader.tsx","../src/Table/components/TablePagination/components/ItemCountDisplay/ItemCountDisplay.tsx","../src/Table/components/TablePagination/components/ItemCountSelect/ItemCountSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/components/PageSelect/PageSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/TablePaginator.tsx","../src/Table/components/TablePagination/TablePagination.tsx","../src/Table/components/TableRow/components/TableRowCell/TableRowCell.tsx","../src/Table/components/TableRow/TableRows.tsx","../src/Table/Table.tsx"],"sourcesContent":["import { atom } from 'jotai';\nimport { createContext } from 'react';\n\ntype TableStatics = {\n    actionable: boolean;\n    backgroundColor: string | undefined;\n    hideDividers: boolean;\n    onSelectedRowsChange?: (selectedRows: string) => void;\n    pageSizeOptions: number[];\n    showColumnDividers: boolean;\n    stickyFirstColumn: boolean;\n};\n\nexport const emptyTableStatics: TableStatics = {\n    actionable: false,\n    backgroundColor: undefined,\n    hideDividers: false,\n    pageSizeOptions: [],\n    showColumnDividers: false,\n    stickyFirstColumn: false,\n};\n\nexport const tableStaticsContext = createContext<TableStatics>(emptyTableStatics);\n\n/**\n * This should be the manually sorted column key.\n *\n * It is not guaranteed to match the true sorting of the table.\n */\nexport const sortedColumnKey = atom<string | undefined>(undefined);\n","import { cn } from '@evolve.ui/theme-system';\nimport { atom, useAtomValue } from 'jotai';\nimport { useContext } from 'react';\n\nimport { tableStaticsContext } from '../../sharedState';\nimport { actionableWidth } from '../../sharedStyles';\n\nexport const showLeftStickyShadowAtom = atom<boolean>(false);\nexport const leftStickyShadowWidthAtom = atom<number>(0);\n\n/**\n * This component adds the left hand shadow to the table element for the sticky first column.\n */\nexport const TableShadow = () => {\n    const { actionable, stickyFirstColumn } = useContext(tableStaticsContext);\n    const width = useAtomValue(leftStickyShadowWidthAtom);\n    const showLeftStickyShadow = useAtomValue(showLeftStickyShadowAtom);\n\n    return (\n        <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n            <div\n                className={cn(\n                    'pointer-events-none absolute bottom-0 left-0 top-0 opacity-100 shadow-04 transition-opacity duration-300',\n                    {\n                        'opacity-0': !stickyFirstColumn || !showLeftStickyShadow,\n                    }\n                )}\n                style={{ width: `${actionable ? width + actionableWidth : width}px` }}\n            />\n        </div>\n    );\n};\n\nexport const observeFirstColumnWidth = (setLeftShadowWidth: (width: number) => void) => (ref: HTMLElement | null) => {\n    if (ref) {\n        // Add a resize observer to the first column to determine the width of the left shadow.\n        const resizeObserver = new ResizeObserver((entries) => {\n            const width = entries[0].contentRect.width;\n            setLeftShadowWidth(width);\n        });\n\n        resizeObserver.observe(ref);\n\n        setLeftShadowWidth(ref.getBoundingClientRect().width);\n    }\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useSetAtom } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { ArrowUp } from '../../../Icons';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle } from '../../types';\nimport { leftStickyShadowWidthAtom, observeFirstColumnWidth } from '../TableShadow/TableShadow';\n\ninterface Props<T extends StaticData> {\n    actionableCheckbox: ReactNode;\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    currentSort?: [string, SortType];\n    data: T[];\n    defaultSortDirection: SortType;\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    showTopScrollHint: boolean;\n    sortable: boolean;\n    stickyHeader: boolean;\n}\n\nexport function TableHeader<T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    columns,\n    currentSort,\n    defaultSortDirection,\n    onSortChange,\n    showTopScrollHint,\n    sortable,\n    stickyHeader,\n}: Props<T>) {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const setLeftShadowWidth = useSetAtom(leftStickyShadowWidthAtom);\n\n    const tableBackgroundColor: TableBackgroundStyle =\n        backgroundColor === 'transparent' && stickyHeader ? 'primary' : 'transparent';\n\n    return (\n        <thead>\n            <tr\n                className={cn('relative border-b border-border-primary', {\n                    // BACKGROUND COLOR\n                    'bg-background-primary': tableBackgroundColor === 'primary',\n                    'bg-transparent': tableBackgroundColor === 'transparent',\n                    'shadow-01': stickyHeader && showTopScrollHint,\n                    // STICKY HEADER\n                    'sticky top-0 z-[5]': stickyHeader,\n                })}\n                style={{\n                    transition: stickyHeader ? '0.25s' : undefined,\n                }}\n            >\n                {actionable && (\n                    <th\n                        className={cn(\n                            'hui-text-label-strong bg-background-primary p-0 transition-colors duration-200',\n                            {\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                            }\n                        )}\n                        key=\"actionable\"\n                        scope=\"col\"\n                        style={\n                            stickyFirstColumn\n                                ? {\n                                      left: 0,\n                                      paddingLeft: '14px',\n                                      position: 'sticky',\n                                      zIndex: 1,\n                                  }\n                                : {}\n                        }\n                    >\n                        {actionableCheckbox}\n                    </th>\n                )}\n                {columns.map((column, i) => {\n                    const newDirection =\n                        currentSort && currentSort[0] === column.key\n                            ? currentSort[1] === 'ascending'\n                                ? 'descending'\n                                : 'ascending'\n                            : defaultSortDirection;\n\n                    let ariaSort: undefined | 'none' | 'ascending' | 'descending' = undefined;\n\n                    if (currentSort && currentSort[0] === column.key) {\n                        ariaSort = currentSort[1];\n                    } else if (column.sortable) {\n                        ariaSort = 'none';\n                    }\n\n                    const isFirstColumn = i === 0;\n                    const isStickyFirstColumn = stickyFirstColumn && isFirstColumn;\n\n                    return (\n                        <th\n                            aria-sort={ariaSort}\n                            className={cn('hui-text-label-strong relative p-0 transition-colors duration-200', {\n                                'active:bg-background-pressed': sortable && column.sortable,\n                                // BACKGROUND COLOR\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                // SORTABLE STATES\n                                'group cursor-pointer': sortable && column.sortable,\n                                'hover:bg-background-hover': sortable && column.sortable,\n                                // STICKY FIRST COLUMN\n                                'sticky z-[1] shadow-02': isStickyFirstColumn,\n                            })}\n                            // Using the index as the key is fine here because the columns won't change.\n                            key={i}\n                            onClick={\n                                sortable && column.sortable && onSortChange\n                                    ? () => onSortChange(column.key as string, newDirection)\n                                    : undefined\n                            }\n                            ref={i === 0 ? observeFirstColumnWidth(setLeftShadowWidth) : undefined}\n                            scope=\"col\"\n                            style={\n                                isStickyFirstColumn\n                                    ? {\n                                          left: actionable ? '48px' : '0',\n                                          transform: 'translateX(-1px)',\n                                      }\n                                    : {}\n                            }\n                        >\n                            <span\n                                className={cn('flex items-center gap-xs whitespace-nowrap px-sm', {\n                                    'justify-end': column.align === 'right',\n                                    'justify-start': column.align !== 'right',\n                                })}\n                            >\n                                {column.header ?? null}\n                                {sortable && column.sortable && (\n                                    <ArrowUp\n                                        className={cn('transition-all duration-200', {\n                                            'group-hover:rotate-0': ariaSort === 'descending',\n                                            'group-hover:rotate-180': ariaSort === 'ascending',\n                                            // HOVER STATE - Show on hover for unsorted columns\n                                            'group-hover:visible group-hover:opacity-100': ariaSort === 'none',\n                                            // DEFAULT STATE - Hidden for unsorted columns\n                                            'invisible opacity-0': ariaSort === 'none',\n                                            // ASCENDING STATE - Always visible, rotate on hover\n                                            'visible opacity-100': ariaSort === 'ascending',\n                                            // DESCENDING STATE - Always visible and rotated, rotate back on hover\n                                            'visible rotate-180 opacity-100': ariaSort === 'descending',\n                                        })}\n                                        size=\"sm\"\n                                    />\n                                )}\n                            </span>\n                        </th>\n                    );\n                })}\n            </tr>\n        </thead>\n    );\n}\n","import { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\n\nexport const ItemCountDisplay = () => {\n    const { itemCount, page, pageSize } = usePagination();\n\n    if (pageSize === 'all') {\n        return <BodyPrimary>{itemCount} Items</BodyPrimary>;\n    }\n\n    return (\n        <BodyPrimary>{`${(page - 1) * pageSize + 1} - ${Math.min(\n            page * pageSize,\n            itemCount\n        )} of ${itemCount} Items`}</BodyPrimary>\n    );\n};\n","import { useContext, useMemo } from 'react';\n\nimport { usePagination } from '../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../Select/Select';\nimport { tableStaticsContext } from '../../../../sharedState';\n\nexport const ItemCountSelect = () => {\n    const { pageSize, setPageSize } = usePagination();\n    const { pageSizeOptions } = useContext(tableStaticsContext);\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=\"w-[232px]\"\n            defaultValue={pageSize}\n            isInsideLabel\n            labelText=\"Items per page:\"\n            onChange={(event?: OptionType) => setPageSize(event?.value)}\n            options={generatedOptions}\n            small\n            usePortalMenu\n            value={{ label: pageSize, value: pageSize.toString() }}\n        />\n    );\n};\n","import { useMemo } from 'react';\n\nimport { usePagination } from '../../../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../../../Select/Select';\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            defaultValue={pageCount}\n            isInsideLabel\n            labelText=\"Page\"\n            onChange={(event?: OptionType) => goToPage(event?.value)}\n            options={options}\n            small\n            usePortalMenu\n            value={options[page - 1]}\n        />\n    );\n};\n","import { IconButton } from '../../../../../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../../../../../Icons';\nimport { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\nimport { PageSelect } from './components/PageSelect/PageSelect';\n\nexport const Pagination = () => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    return (\n        <div className=\"flex items-center\">\n            <IconButton\n                aria-label=\"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 pl-xs pr-sm\">of {pageCount} pages</BodyPrimary>\n            <IconButton\n                aria-label=\"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 { ItemCountDisplay } from './components/ItemCountDisplay/ItemCountDisplay';\nimport { ItemCountSelect } from './components/ItemCountSelect/ItemCountSelect';\nimport { Pagination } from './components/TablePaginator/TablePaginator';\n\nexport const TableControls = () => {\n    return (\n        <div\n            className=\"flex items-center justify-between pt-4\"\n            data-hui-id=\"TableControls\"\n        >\n            <ItemCountSelect />\n            <ItemCountDisplay />\n            <Pagination />\n        </div>\n    );\n};\n\nTableControls.displayName = 'TableControls';\n","import { cn } from '@evolve.ui/theme-system';\nimport { useContext } from 'react';\n\nimport { BodySecondary } from '../../../../../Typography/Text/Text';\nimport { tableStaticsContext } from '../../../../sharedState';\nimport { ColumnType, StaticData } from '../../../../types';\n\ninterface Props<T extends StaticData> {\n    backgroundColor: 'primary' | 'secondary' | 'subdued' | 'disabled' | 'transparent';\n    column: ColumnType<T>;\n    columnIndex: number;\n    item: T;\n}\n\nexport const TableRowCell = <T extends StaticData>({ backgroundColor, column, columnIndex, item }: Props<T>) => {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const value = item[column.key];\n\n    return (\n        <td\n            className={cn('whitespace-nowrap px-sm py-0', {\n                'bg-background-disabled': backgroundColor === 'disabled',\n                'bg-background-primary': backgroundColor === 'primary',\n                'bg-background-secondary': backgroundColor === 'secondary',\n                'bg-background-subdued': backgroundColor === 'subdued',\n                'bg-transparent': backgroundColor === 'transparent',\n                // COLUMN DIVIDER\n                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                //   HOVER\n                'group-hover:bg-surface-200 group-active:bg-surface-300': !item.disabled,\n                // Add relative positioning for sticky columns to support the background fix\n                relative: stickyFirstColumn && columnIndex === 0,\n                // For non-actionable tables, first column can be at left-0\n                'sticky left-0 z-[2]': stickyFirstColumn && columnIndex === 0 && !actionable,\n                // For actionable tables, first column should be positioned after the checkbox (48px width)\n                'sticky left-xl z-[2]': stickyFirstColumn && columnIndex === 0 && actionable,\n                'sticky-column': stickyFirstColumn && columnIndex === 0,\n                'text-left': !column.align || column.align === 'left',\n                'text-right': column.align === 'right',\n            })}\n        >\n            {Boolean(column.renderItem) ? (\n                column.renderItem?.(item, column)\n            ) : (\n                <BodySecondary color={Boolean(item.disabled) ? 'disabled' : 'primary'}>{value as string}</BodySecondary>\n            )}\n        </td>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport { Checkbox } from '../../../ChoiceListItem';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, StaticData, TableBackgroundStyle } from '../../types';\nimport { TableRowCell } from './components/TableRowCell/TableRowCell';\n\ninterface Props<T extends StaticData> {\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    data: T[];\n    selectedRows?: Set<T['key']>;\n    zebraStripes: boolean;\n}\n\nexport const TableRows = <T extends StaticData>({\n    backgroundColor = 'primary',\n    columns,\n    data,\n    selectedRows,\n    zebraStripes,\n}: Props<T>) => {\n    const { actionable, hideDividers, onSelectedRowsChange, showColumnDividers, stickyFirstColumn } =\n        useContext(tableStaticsContext);\n\n    const onRowClick = useCallback(\n        (event: MouseEvent<HTMLTableRowElement>) => {\n            if (actionable) {\n                const checkbox = event.currentTarget.querySelector('input[type=\"checkbox\"]') as HTMLElement | undefined;\n\n                checkbox?.click();\n            }\n        },\n        [actionable]\n    );\n\n    const formattedData = useMemo(() => {\n        return data.map((item) => {\n            const renderedColumns = columns.map((column, columnIndex) => (\n                <TableRowCell\n                    backgroundColor={backgroundColor}\n                    column={column}\n                    columnIndex={columnIndex}\n                    item={item}\n                    key={`table-row-cell-${columnIndex}`}\n                />\n            ));\n\n            const isOdd = data.indexOf(item) % 2 !== 0;\n            const shouldShowZebraStripe = zebraStripes && isOdd;\n            const isSelectedNotDisabled = selectedRows && selectedRows.has(item.key) && !item.disabled;\n\n            return (\n                <tr\n                    // BASE\n                    className={cn(\n                        'group relative cursor-default bg-background-primary',\n\n                        //  BACKGROUND COLORS\n                        {\n                            'bg-background-disabled': backgroundColor === 'disabled',\n                            'bg-background-primary': backgroundColor === 'primary' && !zebraStripes,\n                            'bg-background-secondary': backgroundColor === 'secondary',\n                            'bg-background-subdued': backgroundColor === 'subdued',\n                            'bg-transparent': backgroundColor === 'transparent',\n                        },\n                        {\n                            '[&>td]:bg-background-disabled': backgroundColor === 'disabled' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-inverse/[0.03]':\n                                backgroundColor === 'transparent' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-secondary': backgroundColor === 'secondary' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-subdued':\n                                (backgroundColor === 'primary' || backgroundColor === 'subdued') &&\n                                shouldShowZebraStripe,\n                        },\n                        {\n                            // HIGHLIGHTED - exclude sticky columns since they handle their own states\n                            '!bg-background-secondary [&>td]:bg-background-secondary': isSelectedNotDisabled,\n\n                            // DIVIDERS\n                            'border-b border-border-secondary': !hideDividers,\n                            // ACTIONABLE\n                            'cursor-pointer': actionable && !item.disabled,\n                        }\n                    )}\n                    data-disabled={item.disabled ? 'true' : undefined}\n                    key={item.key}\n                    onClick={onRowClick}\n                >\n                    {actionable && (\n                        <td\n                            className={cn(\n                                'bg-background-primary p-0',\n                                {\n                                    // COLUMN DIVIDER\n                                    'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                    // Direct hover/active states for sticky column\n                                    'group-hover:!bg-surface-200 group-active:!bg-surface-300': !item.disabled,\n                                    'sticky left-0 z-[3]': stickyFirstColumn,\n                                    'sticky-column': stickyFirstColumn,\n                                },\n                                {\n                                    // Selected state for sticky column\n                                    'bg-background-secondary':\n                                        stickyFirstColumn &&\n                                        selectedRows &&\n                                        selectedRows.has(item.key) &&\n                                        !item.disabled,\n                                }\n                            )}\n                            key=\"actionable\"\n                            onClick={(e) => e.stopPropagation()}\n                        >\n                            <Checkbox.Option\n                                checked={selectedRows ? selectedRows.has(item.key) : false}\n                                className={cn('flex h-full w-xl items-center justify-center', {\n                                    'group-hover:[&>svg]:!bg-surface-200 group-active:[&>svg]:!border-border-hover':\n                                        !item.disabled,\n                                })}\n                                disabled={Boolean(item.disabled)}\n                                onChange={() => {\n                                    onSelectedRowsChange?.(item.key);\n                                }}\n                            />\n                        </td>\n                    )}\n                    {renderedColumns}\n                </tr>\n            );\n        });\n    }, [\n        actionable,\n        backgroundColor,\n        columns,\n        data,\n        hideDividers,\n        onRowClick,\n        onSelectedRowsChange,\n        selectedRows,\n        showColumnDividers,\n        stickyFirstColumn,\n        zebraStripes,\n    ]);\n\n    return <tbody>{formattedData}</tbody>;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { Provider, useSetAtom } from 'jotai';\nimport { ComponentProps, ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { Loading } from '../Loading/Loading';\nimport { AdvancedPagination, PaginationProvider } from '../Pagination';\nimport { BodySecondary, H3 } from '../Typography/Text/Text';\nimport { TableHeader } from './components/TableHeader/TableHeader';\nimport { TableControls } from './components/TablePagination/TablePagination';\nimport { TableRows } from './components/TableRow/TableRows';\nimport { showLeftStickyShadowAtom, TableShadow } from './components/TableShadow/TableShadow';\nimport { tableStaticsContext } from './sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle, TableRowDensity } from './types';\n\ntype Props<T extends StaticData> = {\n    /**\n     * Adds a checkbox to the left of each row and in the header.\n     * When checked, the row is considered selected.\n     *\n     * @see `onSelectedRowsChange`\n     */\n    actionable?: boolean;\n    /**\n     * This checkbox goes in the top left of your table.\n     *\n     * You can use this to \"select all\" however you'd like.\n     *\n     * Needs `actionable` to be true to show.\n     */\n    actionableCheckbox?: ReactNode;\n    /**\n     * Background color style for the table.\n     * Options: 'primary', 'secondary', 'subdued', 'disabled', or 'transparent'.\n     *\n     * primary - Uses theme.color.background.primary\n     * secondary - Uses theme.color.background.secondary\n     * subdued - Uses theme.color.background.subdued\n     * disabled - Uses theme.color.background.disabled\n     * transparent - Uses transparent background\n     *\n     * @default 'primary'\n     */\n    backgroundColor?: TableBackgroundStyle;\n    className?: string;\n    /**\n     * Specification for the columns of the table.\n     * Includes how to render each item in the column.\n     */\n    columns: ColumnType<T>[];\n    /**\n     * Whether we're currently sorting by anything, and if so, what.\n     *\n     * The first item in the tuple is the column key, and the second is the sort direction.\n     *\n     * @see `onSortChange`\n     */\n    currentSort?: undefined | [string, SortType];\n    /**\n     * The rows of data to be displayed in the table.\n     */\n    data: T[];\n    /**\n     * The default sort direction for columns that are sortable.\n     */\n    defaultSortDirection?: SortType;\n    /**\n     * The text to display when there is no data.\n     */\n    emptyStateHeaderText?: string;\n    /**\n     * The supporting text to display when there is no data.\n     */\n    emptyStateSupportingText?: string;\n    /**\n     * Whether or not to fill the width of the container.\n     *\n     * Gives equal extra space to each column.\n     */\n    fillHorizontal?: boolean;\n    /**\n     * Whether or not to show the border on the main table.\n     */\n    hideBorder?: boolean;\n    /**\n     * Whether or not to hide the dividers between rows.\n     */\n    hideDividers?: boolean;\n    /**\n     * Boolean to use advance pagination component\n     */\n    isAdvancedPagination?: boolean;\n    /**\n     * Whether or not to show a loading indicator.\n     */\n    loading?: boolean;\n    /**\n     * Callback when the selected rows change.\n     *\n     * @param selectedRows the selected rows in the form of a map of row keys to booleans\n     */\n    onSelectedRowsChange?: (selectedRow: T['key']) => void;\n    /**\n     * Callback when the sort status of a column changes.\n     *\n     * @param columnKey The key of the column that was clicked\n     * @param newSort The new sort status of the column\n     * @see `currentSort`\n     */\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    /**\n     * The page size options for the pagination component.\n     */\n    pageSizeOptions?: number[];\n    /**\n     * If provided, the table will add a pagination component.\n     *\n     * @see `PaginationProvider`\n     */\n    pagination?: Omit<ComponentProps<typeof PaginationProvider>, 'path' | 'children'> & {\n        /**\n         * The key of the pagination provider.\n         *\n         * This is used to ensure that the pagination provider is only re-rendered when the key changes.\n         * @example key={`${currentPage}-${pageSize}-${itemCount}`}\n         */\n        key?: string;\n    };\n    /**\n     * The height of the rows in the table.\n     * - `sm` = 28px\n     * - `md` = 36px\n     * - `lg` = 48px\n     *\n     * @default md\n     */\n    rowDensity?: TableRowDensity;\n    /**\n     * The rows that are currently selected.\n     *\n     * This is a controlled prop.\n     */\n    selectedRows?: Set<T['key']>;\n    /**\n     * Adds vertical dividers between columns in both header and body cells,\n     * including the actionable checkbox column. Combine with the default row\n     * dividers (`hideDividers={false}`) and outer border (`hideBorder={false}`)\n     * for a fully bordered grid.\n     *\n     * @default false\n     */\n    showColumnDividers?: boolean;\n    /**\n     * Whether or not the columns are sortable.\n     *\n     * @see `onSortChange`\n     * @see `currentSort`\n     */\n    sortable?: boolean;\n    /**\n     * Locks the first column on horizontal scroll.\n     */\n    stickyFirstColumn?: boolean;\n    /**\n     * Make header sticky when table height is set.\n     *\n     * @default false\n     *\n     * .table-container {\n     *   height: calc(100vh - 200px);\n     * }\n     */\n    stickyHeader?: boolean;\n    /**\n     * Adds a zebra stripe to every other row.\n     */\n    zebraStripes?: boolean;\n};\n\n/**\n * Helper function to get background color classes based on TableBackgroundStyle\n */\nconst getBackgroundColorClasses = (backgroundColor?: TableBackgroundStyle, isZebraStripe = false) => {\n    if (!backgroundColor) {\n        return 'bg-background-primary';\n    }\n\n    switch (backgroundColor) {\n        case 'secondary':\n            return 'bg-background-secondary';\n        case 'subdued':\n            return 'bg-background-subdued';\n        case 'disabled':\n            return 'bg-background-disabled';\n        case 'transparent':\n            return 'bg-transparent';\n        case 'primary':\n            if (isZebraStripe) {\n                return 'bg-background-subdued';\n            }\n            return 'bg-background-primary';\n        default:\n            return 'bg-background-primary';\n    }\n};\n\nexport const Table = <T extends StaticData>({\n    actionable = false,\n    backgroundColor,\n    hideDividers = false,\n    isAdvancedPagination,\n    onSelectedRowsChange,\n    pageSizeOptions = [25, 50, 100],\n    showColumnDividers = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    ...props\n}: Props<T>) => {\n    const hasNoData = Boolean(props.loading) || !Boolean(props.data.length);\n\n    // Memoize the context value to prevent unnecessary re-renders\n    const contextValue = useMemo(\n        () => ({\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn: stickyFirstColumn && !hasNoData,\n        }),\n        [\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn,\n            hasNoData,\n        ]\n    );\n\n    // We need a jotai provider to isolate tables from one another.\n    return (\n        <Provider>\n            <tableStaticsContext.Provider value={contextValue}>\n                <InnerTable\n                    backgroundColor={backgroundColor}\n                    data-hui-id=\"Table\"\n                    hasNoData={hasNoData}\n                    hideDividers={hideDividers}\n                    isAdvancedPagination={isAdvancedPagination}\n                    stickyFirstColumn={stickyFirstColumn}\n                    stickyHeader={stickyHeader}\n                    {...props}\n                />\n            </tableStaticsContext.Provider>\n        </Provider>\n    );\n};\n\n// react dev tools display name\nTable.displayName = 'Table';\n\nconst InnerTable = <T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    className,\n    columns,\n    currentSort,\n    data,\n    defaultSortDirection = 'descending',\n    emptyStateHeaderText = 'Empty state heading message...',\n    emptyStateSupportingText = 'Supporting message to provide further guidance on how to remedy empty state.',\n    fillHorizontal = false,\n    hasNoData,\n    hideBorder = false,\n    hideDividers = false,\n    isAdvancedPagination,\n    loading = false,\n    onSortChange,\n    pagination,\n    rowDensity = 'md',\n    selectedRows,\n    sortable = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    zebraStripes = false,\n}: Props<T> & {\n    hasNoData: boolean;\n}) => {\n    const [showRightScrollHint, setShowRightScrollHint] = useState(false);\n    const [showLeftScrollHint, setShowLeftScrollHint] = useState(false);\n    const [showTopScrollHint, setShowTopScrollHint] = useState(false);\n    const setShowLeftShadow = useSetAtom(showLeftStickyShadowAtom);\n\n    const handleScroll = useCallback(\n        (ref: HTMLDivElement) => {\n            setShowLeftShadow(stickyFirstColumn && ref.scrollLeft > 20);\n            setShowLeftScrollHint(!stickyFirstColumn && ref.scrollLeft > 50);\n            setShowRightScrollHint(ref.scrollLeft + ref.clientWidth < ref.scrollWidth - 50);\n            setShowTopScrollHint(ref.scrollTop !== 0);\n        },\n        [setShowLeftShadow, stickyFirstColumn]\n    );\n\n    let rowHeight = 0;\n    switch (rowDensity) {\n        case 'sm':\n            rowHeight = 28;\n            break;\n        case 'md':\n            rowHeight = 36;\n            break;\n        case 'lg':\n            rowHeight = 48;\n            break;\n        default:\n            rowHeight = 36;\n            break;\n    }\n\n    // Container classes\n    const containerClasses = cn(\n        'relative max-w-full',\n        {\n            'w-full': fillHorizontal,\n            'w-min': !fillHorizontal,\n        },\n        className,\n        'table-container'\n    );\n\n    // RelativeContainer classes\n    const relativeContainerClasses = cn(\n        'relative',\n        {\n            'border border-border-secondary': !hideBorder,\n            'border-b-0': !hideDividers && !hasNoData && !hideBorder,\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // TableScroll classes\n    const tableScrollClasses = cn(\n        'w-full',\n        {\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'min-h-[220px]': loading || data.length === 0,\n            'overflow-x-auto': !hasNoData,\n            'overflow-x-hidden': hasNoData,\n            'overflow-y-auto': stickyHeader,\n            'overflow-y-visible': !stickyHeader,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // Table classes\n    const tableClasses = cn(\n        'border-collapse',\n        {\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor),\n        // Row height styles using CSS custom properties for dynamic values\n        '[&_td]:h-[var(--row-height)] [&_th]:h-[var(--row-height)]',\n        // Background color for th and td elements\n        {\n            '[&_th]:bg-background-disabled': backgroundColor === 'disabled',\n            '[&_th]:bg-background-primary': backgroundColor === 'primary' || !backgroundColor,\n            '[&_th]:bg-background-secondary': backgroundColor === 'secondary',\n            '[&_th]:bg-background-subdued': backgroundColor === 'subdued',\n            '[&_th]:bg-transparent': backgroundColor === 'transparent',\n        },\n        // Scroll hint shadows using pseudo-elements\n        '[&::before]:pointer-events-none [&::before]:absolute [&::before]:z-[1] [&::before]:content-[\"\"]',\n        '[&::before]:bottom-0 [&::before]:left-0 [&::before]:top-0 [&::before]:w-[48px]',\n        '[&::before]:opacity-0 [&::before]:transition-opacity [&::before]:duration-200',\n        '[&::before]:shadow-[8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::before]:opacity-100': showLeftScrollHint && !hasNoData,\n        },\n        '[&::after]:pointer-events-none [&::after]:absolute [&::after]:z-[1] [&::after]:content-[\"\"]',\n        '[&::after]:bottom-0 [&::after]:right-0 [&::after]:top-0 [&::after]:w-[48px]',\n        '[&::after]:opacity-0 [&::after]:transition-opacity [&::after]:duration-200',\n        '[&::after]:shadow-[-8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::after]:opacity-100': showRightScrollHint && !hasNoData,\n        }\n    );\n\n    // Empty state container classes\n    const emptyStateContainerClasses = cn(\n        'absolute flex w-full flex-col items-center justify-center py-2xl text-center'\n    );\n\n    return (\n        <div\n            className={containerClasses}\n            style={{ '--row-height': `${rowHeight}px` } as React.CSSProperties}\n        >\n            <div className={relativeContainerClasses}>\n                <div\n                    className={tableScrollClasses}\n                    ref={(ref: HTMLDivElement | null) => {\n                        if (!ref) {\n                            return;\n                        }\n\n                        // Add a scroll event listener to the table scroll container\n                        // to determine if the right scroll hint should be shown\n                        ref.addEventListener('scroll', () => {\n                            handleScroll(ref);\n                        });\n\n                        handleScroll(ref);\n                    }}\n                >\n                    <table className={tableClasses}>\n                        <TableHeader\n                            actionableCheckbox={actionableCheckbox}\n                            backgroundColor={backgroundColor}\n                            columns={columns}\n                            currentSort={currentSort}\n                            data={data}\n                            defaultSortDirection={defaultSortDirection}\n                            onSortChange={onSortChange}\n                            showTopScrollHint={showTopScrollHint}\n                            sortable={sortable}\n                            stickyHeader={stickyHeader}\n                        />\n\n                        {!loading && Boolean(data.length) && (\n                            <TableRows\n                                backgroundColor={backgroundColor}\n                                columns={columns}\n                                data={data}\n                                selectedRows={selectedRows}\n                                zebraStripes={zebraStripes}\n                            />\n                        )}\n                    </table>\n                    {!hasNoData && <TableShadow />}\n\n                    {!loading && !Boolean(data.length) && (\n                        <div className={emptyStateContainerClasses}>\n                            <H3>{emptyStateHeaderText}</H3>\n                            <BodySecondary>{emptyStateSupportingText}</BodySecondary>\n                        </div>\n                    )}\n\n                    {loading && (\n                        <div className={emptyStateContainerClasses}>\n                            <Loading size={32} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {pagination && !hasNoData && (\n                <PaginationProvider\n                    {...pagination}\n                    key={pagination.key}\n                    path=\"\"\n                >\n                    {isAdvancedPagination ? <AdvancedPagination className=\"px-0 py-sm\" /> : <TableControls />}\n                </PaginationProvider>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/{Table-CLlDragJ.cjs → Table-D4UYosb1.cjs}

@@ -3,8 +3,8 @@ const require_Typography_Text = require("./Typography/Text.cjs");
 const require_IconButton = require("./IconButton.cjs");
 const require_ChoiceListItem = require("./ChoiceListItem-D_74Zcpd.cjs");
 const require_Loading = require("./Loading-BL7_u25j.cjs");
-const require_Pagination = require("./Pagination-bAtbN478.cjs");
-const require_Select = require("./Select-BXDjzyDs.cjs");
+const require_Pagination = require("./Pagination-Denb9_zB.cjs");
+const require_Select = require("./Select-DCCcyLT4.cjs");
 let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -497,4 +497,4 @@ Object.defineProperty(exports, "Table", {
 	}
 });
 
-//# sourceMappingURL=Table-CLlDragJ.cjs.map
+//# sourceMappingURL=Table-D4UYosb1.cjs.map

package/{Table-CLlDragJ.cjs.map → Table-D4UYosb1.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Table-CLlDragJ.cjs","names":["ArrowUp","usePagination","BodyPrimary","usePagination","Select","usePagination","Select","usePagination","IconButton","CaretLeft","BodyPrimary","CaretRight","BodySecondary","Checkbox","Provider","H3","BodySecondary","Loading","PaginationProvider","AdvancedPagination"],"sources":["../src/Table/sharedState.ts","../src/Table/components/TableShadow/TableShadow.tsx","../src/Table/components/TableHeader/TableHeader.tsx","../src/Table/components/TablePagination/components/ItemCountDisplay/ItemCountDisplay.tsx","../src/Table/components/TablePagination/components/ItemCountSelect/ItemCountSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/components/PageSelect/PageSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/TablePaginator.tsx","../src/Table/components/TablePagination/TablePagination.tsx","../src/Table/components/TableRow/components/TableRowCell/TableRowCell.tsx","../src/Table/components/TableRow/TableRows.tsx","../src/Table/Table.tsx"],"sourcesContent":["import { atom } from 'jotai';\nimport { createContext } from 'react';\n\ntype TableStatics = {\n    actionable: boolean;\n    backgroundColor: string | undefined;\n    hideDividers: boolean;\n    onSelectedRowsChange?: (selectedRows: string) => void;\n    pageSizeOptions: number[];\n    showColumnDividers: boolean;\n    stickyFirstColumn: boolean;\n};\n\nexport const emptyTableStatics: TableStatics = {\n    actionable: false,\n    backgroundColor: undefined,\n    hideDividers: false,\n    pageSizeOptions: [],\n    showColumnDividers: false,\n    stickyFirstColumn: false,\n};\n\nexport const tableStaticsContext = createContext<TableStatics>(emptyTableStatics);\n\n/**\n * This should be the manually sorted column key.\n *\n * It is not guaranteed to match the true sorting of the table.\n */\nexport const sortedColumnKey = atom<string | undefined>(undefined);\n","import { cn } from '@evolve.ui/theme-system';\nimport { atom, useAtomValue } from 'jotai';\nimport { useContext } from 'react';\n\nimport { tableStaticsContext } from '../../sharedState';\nimport { actionableWidth } from '../../sharedStyles';\n\nexport const showLeftStickyShadowAtom = atom<boolean>(false);\nexport const leftStickyShadowWidthAtom = atom<number>(0);\n\n/**\n * This component adds the left hand shadow to the table element for the sticky first column.\n */\nexport const TableShadow = () => {\n    const { actionable, stickyFirstColumn } = useContext(tableStaticsContext);\n    const width = useAtomValue(leftStickyShadowWidthAtom);\n    const showLeftStickyShadow = useAtomValue(showLeftStickyShadowAtom);\n\n    return (\n        <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n            <div\n                className={cn(\n                    'pointer-events-none absolute bottom-0 left-0 top-0 opacity-100 shadow-04 transition-opacity duration-300',\n                    {\n                        'opacity-0': !stickyFirstColumn || !showLeftStickyShadow,\n                    }\n                )}\n                style={{ width: `${actionable ? width + actionableWidth : width}px` }}\n            />\n        </div>\n    );\n};\n\nexport const observeFirstColumnWidth = (setLeftShadowWidth: (width: number) => void) => (ref: HTMLElement | null) => {\n    if (ref) {\n        // Add a resize observer to the first column to determine the width of the left shadow.\n        const resizeObserver = new ResizeObserver((entries) => {\n            const width = entries[0].contentRect.width;\n            setLeftShadowWidth(width);\n        });\n\n        resizeObserver.observe(ref);\n\n        setLeftShadowWidth(ref.getBoundingClientRect().width);\n    }\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useSetAtom } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { ArrowUp } from '../../../Icons';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle } from '../../types';\nimport { leftStickyShadowWidthAtom, observeFirstColumnWidth } from '../TableShadow/TableShadow';\n\ninterface Props<T extends StaticData> {\n    actionableCheckbox: ReactNode;\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    currentSort?: [string, SortType];\n    data: T[];\n    defaultSortDirection: SortType;\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    showTopScrollHint: boolean;\n    sortable: boolean;\n    stickyHeader: boolean;\n}\n\nexport function TableHeader<T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    columns,\n    currentSort,\n    defaultSortDirection,\n    onSortChange,\n    showTopScrollHint,\n    sortable,\n    stickyHeader,\n}: Props<T>) {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const setLeftShadowWidth = useSetAtom(leftStickyShadowWidthAtom);\n\n    const tableBackgroundColor: TableBackgroundStyle =\n        backgroundColor === 'transparent' && stickyHeader ? 'primary' : 'transparent';\n\n    return (\n        <thead>\n            <tr\n                className={cn('relative border-b border-border-primary', {\n                    // BACKGROUND COLOR\n                    'bg-background-primary': tableBackgroundColor === 'primary',\n                    'bg-transparent': tableBackgroundColor === 'transparent',\n                    'shadow-01': stickyHeader && showTopScrollHint,\n                    // STICKY HEADER\n                    'sticky top-0 z-[5]': stickyHeader,\n                })}\n                style={{\n                    transition: stickyHeader ? '0.25s' : undefined,\n                }}\n            >\n                {actionable && (\n                    <th\n                        className={cn(\n                            'hui-text-label-strong bg-background-primary p-0 transition-colors duration-200',\n                            {\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                            }\n                        )}\n                        key=\"actionable\"\n                        scope=\"col\"\n                        style={\n                            stickyFirstColumn\n                                ? {\n                                      left: 0,\n                                      paddingLeft: '14px',\n                                      position: 'sticky',\n                                      zIndex: 1,\n                                  }\n                                : {}\n                        }\n                    >\n                        {actionableCheckbox}\n                    </th>\n                )}\n                {columns.map((column, i) => {\n                    const newDirection =\n                        currentSort && currentSort[0] === column.key\n                            ? currentSort[1] === 'ascending'\n                                ? 'descending'\n                                : 'ascending'\n                            : defaultSortDirection;\n\n                    let ariaSort: undefined | 'none' | 'ascending' | 'descending' = undefined;\n\n                    if (currentSort && currentSort[0] === column.key) {\n                        ariaSort = currentSort[1];\n                    } else if (column.sortable) {\n                        ariaSort = 'none';\n                    }\n\n                    const isFirstColumn = i === 0;\n                    const isStickyFirstColumn = stickyFirstColumn && isFirstColumn;\n\n                    return (\n                        <th\n                            aria-sort={ariaSort}\n                            className={cn('hui-text-label-strong relative p-0 transition-colors duration-200', {\n                                'active:bg-background-pressed': sortable && column.sortable,\n                                // BACKGROUND COLOR\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                // SORTABLE STATES\n                                'group cursor-pointer': sortable && column.sortable,\n                                'hover:bg-background-hover': sortable && column.sortable,\n                                // STICKY FIRST COLUMN\n                                'sticky z-[1] shadow-02': isStickyFirstColumn,\n                            })}\n                            // Using the index as the key is fine here because the columns won't change.\n                            key={i}\n                            onClick={\n                                sortable && column.sortable && onSortChange\n                                    ? () => onSortChange(column.key as string, newDirection)\n                                    : undefined\n                            }\n                            ref={i === 0 ? observeFirstColumnWidth(setLeftShadowWidth) : undefined}\n                            scope=\"col\"\n                            style={\n                                isStickyFirstColumn\n                                    ? {\n                                          left: actionable ? '48px' : '0',\n                                          transform: 'translateX(-1px)',\n                                      }\n                                    : {}\n                            }\n                        >\n                            <span\n                                className={cn('flex items-center gap-xs whitespace-nowrap px-sm', {\n                                    'justify-end': column.align === 'right',\n                                    'justify-start': column.align !== 'right',\n                                })}\n                            >\n                                {column.header ?? null}\n                                {sortable && column.sortable && (\n                                    <ArrowUp\n                                        className={cn('transition-all duration-200', {\n                                            'group-hover:rotate-0': ariaSort === 'descending',\n                                            'group-hover:rotate-180': ariaSort === 'ascending',\n                                            // HOVER STATE - Show on hover for unsorted columns\n                                            'group-hover:visible group-hover:opacity-100': ariaSort === 'none',\n                                            // DEFAULT STATE - Hidden for unsorted columns\n                                            'invisible opacity-0': ariaSort === 'none',\n                                            // ASCENDING STATE - Always visible, rotate on hover\n                                            'visible opacity-100': ariaSort === 'ascending',\n                                            // DESCENDING STATE - Always visible and rotated, rotate back on hover\n                                            'visible rotate-180 opacity-100': ariaSort === 'descending',\n                                        })}\n                                        size=\"sm\"\n                                    />\n                                )}\n                            </span>\n                        </th>\n                    );\n                })}\n            </tr>\n        </thead>\n    );\n}\n","import { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\n\nexport const ItemCountDisplay = () => {\n    const { itemCount, page, pageSize } = usePagination();\n\n    if (pageSize === 'all') {\n        return <BodyPrimary>{itemCount} Items</BodyPrimary>;\n    }\n\n    return (\n        <BodyPrimary>{`${(page - 1) * pageSize + 1} - ${Math.min(\n            page * pageSize,\n            itemCount\n        )} of ${itemCount} Items`}</BodyPrimary>\n    );\n};\n","import { useContext, useMemo } from 'react';\n\nimport { usePagination } from '../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../Select/Select';\nimport { tableStaticsContext } from '../../../../sharedState';\n\nexport const ItemCountSelect = () => {\n    const { pageSize, setPageSize } = usePagination();\n    const { pageSizeOptions } = useContext(tableStaticsContext);\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=\"w-[232px]\"\n            defaultValue={pageSize}\n            isInsideLabel\n            labelText=\"Items per page:\"\n            onChange={(event?: OptionType) => setPageSize(event?.value)}\n            options={generatedOptions}\n            small\n            usePortalMenu\n            value={{ label: pageSize, value: pageSize.toString() }}\n        />\n    );\n};\n","import { useMemo } from 'react';\n\nimport { usePagination } from '../../../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../../../Select/Select';\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            defaultValue={pageCount}\n            isInsideLabel\n            labelText=\"Page\"\n            onChange={(event?: OptionType) => goToPage(event?.value)}\n            options={options}\n            small\n            usePortalMenu\n            value={options[page - 1]}\n        />\n    );\n};\n","import { IconButton } from '../../../../../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../../../../../Icons';\nimport { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\nimport { PageSelect } from './components/PageSelect/PageSelect';\n\nexport const Pagination = () => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    return (\n        <div className=\"flex items-center\">\n            <IconButton\n                aria-label=\"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 pl-xs pr-sm\">of {pageCount} pages</BodyPrimary>\n            <IconButton\n                aria-label=\"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 { ItemCountDisplay } from './components/ItemCountDisplay/ItemCountDisplay';\nimport { ItemCountSelect } from './components/ItemCountSelect/ItemCountSelect';\nimport { Pagination } from './components/TablePaginator/TablePaginator';\n\nexport const TableControls = () => {\n    return (\n        <div\n            className=\"flex items-center justify-between pt-4\"\n            data-hui-id=\"TableControls\"\n        >\n            <ItemCountSelect />\n            <ItemCountDisplay />\n            <Pagination />\n        </div>\n    );\n};\n\nTableControls.displayName = 'TableControls';\n","import { cn } from '@evolve.ui/theme-system';\nimport { useContext } from 'react';\n\nimport { BodySecondary } from '../../../../../Typography/Text/Text';\nimport { tableStaticsContext } from '../../../../sharedState';\nimport { ColumnType, StaticData } from '../../../../types';\n\ninterface Props<T extends StaticData> {\n    backgroundColor: 'primary' | 'secondary' | 'subdued' | 'disabled' | 'transparent';\n    column: ColumnType<T>;\n    columnIndex: number;\n    item: T;\n}\n\nexport const TableRowCell = <T extends StaticData>({ backgroundColor, column, columnIndex, item }: Props<T>) => {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const value = item[column.key];\n\n    return (\n        <td\n            className={cn('whitespace-nowrap px-sm py-0', {\n                'bg-background-disabled': backgroundColor === 'disabled',\n                'bg-background-primary': backgroundColor === 'primary',\n                'bg-background-secondary': backgroundColor === 'secondary',\n                'bg-background-subdued': backgroundColor === 'subdued',\n                'bg-transparent': backgroundColor === 'transparent',\n                // COLUMN DIVIDER\n                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                //   HOVER\n                'group-hover:bg-surface-200 group-active:bg-surface-300': !item.disabled,\n                // Add relative positioning for sticky columns to support the background fix\n                relative: stickyFirstColumn && columnIndex === 0,\n                // For non-actionable tables, first column can be at left-0\n                'sticky left-0 z-[2]': stickyFirstColumn && columnIndex === 0 && !actionable,\n                // For actionable tables, first column should be positioned after the checkbox (48px width)\n                'sticky left-xl z-[2]': stickyFirstColumn && columnIndex === 0 && actionable,\n                'sticky-column': stickyFirstColumn && columnIndex === 0,\n                'text-left': !column.align || column.align === 'left',\n                'text-right': column.align === 'right',\n            })}\n        >\n            {Boolean(column.renderItem) ? (\n                column.renderItem?.(item, column)\n            ) : (\n                <BodySecondary color={Boolean(item.disabled) ? 'disabled' : 'primary'}>{value as string}</BodySecondary>\n            )}\n        </td>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport { Checkbox } from '../../../ChoiceListItem';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, StaticData, TableBackgroundStyle } from '../../types';\nimport { TableRowCell } from './components/TableRowCell/TableRowCell';\n\ninterface Props<T extends StaticData> {\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    data: T[];\n    selectedRows?: Set<T['key']>;\n    zebraStripes: boolean;\n}\n\nexport const TableRows = <T extends StaticData>({\n    backgroundColor = 'primary',\n    columns,\n    data,\n    selectedRows,\n    zebraStripes,\n}: Props<T>) => {\n    const { actionable, hideDividers, onSelectedRowsChange, showColumnDividers, stickyFirstColumn } =\n        useContext(tableStaticsContext);\n\n    const onRowClick = useCallback(\n        (event: MouseEvent<HTMLTableRowElement>) => {\n            if (actionable) {\n                const checkbox = event.currentTarget.querySelector('input[type=\"checkbox\"]') as HTMLElement | undefined;\n\n                checkbox?.click();\n            }\n        },\n        [actionable]\n    );\n\n    const formattedData = useMemo(() => {\n        return data.map((item) => {\n            const renderedColumns = columns.map((column, columnIndex) => (\n                <TableRowCell\n                    backgroundColor={backgroundColor}\n                    column={column}\n                    columnIndex={columnIndex}\n                    item={item}\n                    key={`table-row-cell-${columnIndex}`}\n                />\n            ));\n\n            const isOdd = data.indexOf(item) % 2 !== 0;\n            const shouldShowZebraStripe = zebraStripes && isOdd;\n            const isSelectedNotDisabled = selectedRows && selectedRows.has(item.key) && !item.disabled;\n\n            return (\n                <tr\n                    // BASE\n                    className={cn(\n                        'group relative cursor-default bg-background-primary',\n\n                        //  BACKGROUND COLORS\n                        {\n                            'bg-background-disabled': backgroundColor === 'disabled',\n                            'bg-background-primary': backgroundColor === 'primary' && !zebraStripes,\n                            'bg-background-secondary': backgroundColor === 'secondary',\n                            'bg-background-subdued': backgroundColor === 'subdued',\n                            'bg-transparent': backgroundColor === 'transparent',\n                        },\n                        {\n                            '[&>td]:bg-background-disabled': backgroundColor === 'disabled' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-inverse/[0.03]':\n                                backgroundColor === 'transparent' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-secondary': backgroundColor === 'secondary' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-subdued':\n                                (backgroundColor === 'primary' || backgroundColor === 'subdued') &&\n                                shouldShowZebraStripe,\n                        },\n                        {\n                            // HIGHLIGHTED - exclude sticky columns since they handle their own states\n                            '!bg-background-secondary [&>td]:bg-background-secondary': isSelectedNotDisabled,\n\n                            // DIVIDERS\n                            'border-b border-border-secondary': !hideDividers,\n                            // ACTIONABLE\n                            'cursor-pointer': actionable && !item.disabled,\n                        }\n                    )}\n                    data-disabled={item.disabled ? 'true' : undefined}\n                    key={item.key}\n                    onClick={onRowClick}\n                >\n                    {actionable && (\n                        <td\n                            className={cn(\n                                'bg-background-primary p-0',\n                                {\n                                    // COLUMN DIVIDER\n                                    'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                    // Direct hover/active states for sticky column\n                                    'group-hover:!bg-surface-200 group-active:!bg-surface-300': !item.disabled,\n                                    'sticky left-0 z-[3]': stickyFirstColumn,\n                                    'sticky-column': stickyFirstColumn,\n                                },\n                                {\n                                    // Selected state for sticky column\n                                    'bg-background-secondary':\n                                        stickyFirstColumn &&\n                                        selectedRows &&\n                                        selectedRows.has(item.key) &&\n                                        !item.disabled,\n                                }\n                            )}\n                            key=\"actionable\"\n                            onClick={(e) => e.stopPropagation()}\n                        >\n                            <Checkbox.Option\n                                checked={selectedRows ? selectedRows.has(item.key) : false}\n                                className={cn('flex h-full w-xl items-center justify-center', {\n                                    'group-hover:[&>svg]:!bg-surface-200 group-active:[&>svg]:!border-border-hover':\n                                        !item.disabled,\n                                })}\n                                disabled={Boolean(item.disabled)}\n                                onChange={() => {\n                                    onSelectedRowsChange?.(item.key);\n                                }}\n                            />\n                        </td>\n                    )}\n                    {renderedColumns}\n                </tr>\n            );\n        });\n    }, [\n        actionable,\n        backgroundColor,\n        columns,\n        data,\n        hideDividers,\n        onRowClick,\n        onSelectedRowsChange,\n        selectedRows,\n        showColumnDividers,\n        stickyFirstColumn,\n        zebraStripes,\n    ]);\n\n    return <tbody>{formattedData}</tbody>;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { Provider, useSetAtom } from 'jotai';\nimport { ComponentProps, ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { Loading } from '../Loading/Loading';\nimport { AdvancedPagination, PaginationProvider } from '../Pagination';\nimport { BodySecondary, H3 } from '../Typography/Text/Text';\nimport { TableHeader } from './components/TableHeader/TableHeader';\nimport { TableControls } from './components/TablePagination/TablePagination';\nimport { TableRows } from './components/TableRow/TableRows';\nimport { showLeftStickyShadowAtom, TableShadow } from './components/TableShadow/TableShadow';\nimport { tableStaticsContext } from './sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle, TableRowDensity } from './types';\n\ntype Props<T extends StaticData> = {\n    /**\n     * Adds a checkbox to the left of each row and in the header.\n     * When checked, the row is considered selected.\n     *\n     * @see `onSelectedRowsChange`\n     */\n    actionable?: boolean;\n    /**\n     * This checkbox goes in the top left of your table.\n     *\n     * You can use this to \"select all\" however you'd like.\n     *\n     * Needs `actionable` to be true to show.\n     */\n    actionableCheckbox?: ReactNode;\n    /**\n     * Background color style for the table.\n     * Options: 'primary', 'secondary', 'subdued', 'disabled', or 'transparent'.\n     *\n     * primary - Uses theme.color.background.primary\n     * secondary - Uses theme.color.background.secondary\n     * subdued - Uses theme.color.background.subdued\n     * disabled - Uses theme.color.background.disabled\n     * transparent - Uses transparent background\n     *\n     * @default 'primary'\n     */\n    backgroundColor?: TableBackgroundStyle;\n    className?: string;\n    /**\n     * Specification for the columns of the table.\n     * Includes how to render each item in the column.\n     */\n    columns: ColumnType<T>[];\n    /**\n     * Whether we're currently sorting by anything, and if so, what.\n     *\n     * The first item in the tuple is the column key, and the second is the sort direction.\n     *\n     * @see `onSortChange`\n     */\n    currentSort?: undefined | [string, SortType];\n    /**\n     * The rows of data to be displayed in the table.\n     */\n    data: T[];\n    /**\n     * The default sort direction for columns that are sortable.\n     */\n    defaultSortDirection?: SortType;\n    /**\n     * The text to display when there is no data.\n     */\n    emptyStateHeaderText?: string;\n    /**\n     * The supporting text to display when there is no data.\n     */\n    emptyStateSupportingText?: string;\n    /**\n     * Whether or not to fill the width of the container.\n     *\n     * Gives equal extra space to each column.\n     */\n    fillHorizontal?: boolean;\n    /**\n     * Whether or not to show the border on the main table.\n     */\n    hideBorder?: boolean;\n    /**\n     * Whether or not to hide the dividers between rows.\n     */\n    hideDividers?: boolean;\n    /**\n     * Boolean to use advance pagination component\n     */\n    isAdvancedPagination?: boolean;\n    /**\n     * Whether or not to show a loading indicator.\n     */\n    loading?: boolean;\n    /**\n     * Callback when the selected rows change.\n     *\n     * @param selectedRows the selected rows in the form of a map of row keys to booleans\n     */\n    onSelectedRowsChange?: (selectedRow: T['key']) => void;\n    /**\n     * Callback when the sort status of a column changes.\n     *\n     * @param columnKey The key of the column that was clicked\n     * @param newSort The new sort status of the column\n     * @see `currentSort`\n     */\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    /**\n     * The page size options for the pagination component.\n     */\n    pageSizeOptions?: number[];\n    /**\n     * If provided, the table will add a pagination component.\n     *\n     * @see `PaginationProvider`\n     */\n    pagination?: Omit<ComponentProps<typeof PaginationProvider>, 'path' | 'children'> & {\n        /**\n         * The key of the pagination provider.\n         *\n         * This is used to ensure that the pagination provider is only re-rendered when the key changes.\n         * @example key={`${currentPage}-${pageSize}-${itemCount}`}\n         */\n        key?: string;\n    };\n    /**\n     * The height of the rows in the table.\n     * - `sm` = 28px\n     * - `md` = 36px\n     * - `lg` = 48px\n     *\n     * @default md\n     */\n    rowDensity?: TableRowDensity;\n    /**\n     * The rows that are currently selected.\n     *\n     * This is a controlled prop.\n     */\n    selectedRows?: Set<T['key']>;\n    /**\n     * Adds vertical dividers between columns in both header and body cells,\n     * including the actionable checkbox column. Combine with the default row\n     * dividers (`hideDividers={false}`) and outer border (`hideBorder={false}`)\n     * for a fully bordered grid.\n     *\n     * @default false\n     */\n    showColumnDividers?: boolean;\n    /**\n     * Whether or not the columns are sortable.\n     *\n     * @see `onSortChange`\n     * @see `currentSort`\n     */\n    sortable?: boolean;\n    /**\n     * Locks the first column on horizontal scroll.\n     */\n    stickyFirstColumn?: boolean;\n    /**\n     * Make header sticky when table height is set.\n     *\n     * @default false\n     *\n     * .table-container {\n     *   height: calc(100vh - 200px);\n     * }\n     */\n    stickyHeader?: boolean;\n    /**\n     * Adds a zebra stripe to every other row.\n     */\n    zebraStripes?: boolean;\n};\n\n/**\n * Helper function to get background color classes based on TableBackgroundStyle\n */\nconst getBackgroundColorClasses = (backgroundColor?: TableBackgroundStyle, isZebraStripe = false) => {\n    if (!backgroundColor) {\n        return 'bg-background-primary';\n    }\n\n    switch (backgroundColor) {\n        case 'secondary':\n            return 'bg-background-secondary';\n        case 'subdued':\n            return 'bg-background-subdued';\n        case 'disabled':\n            return 'bg-background-disabled';\n        case 'transparent':\n            return 'bg-transparent';\n        case 'primary':\n            if (isZebraStripe) {\n                return 'bg-background-subdued';\n            }\n            return 'bg-background-primary';\n        default:\n            return 'bg-background-primary';\n    }\n};\n\nexport const Table = <T extends StaticData>({\n    actionable = false,\n    backgroundColor,\n    hideDividers = false,\n    isAdvancedPagination,\n    onSelectedRowsChange,\n    pageSizeOptions = [25, 50, 100],\n    showColumnDividers = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    ...props\n}: Props<T>) => {\n    const hasNoData = Boolean(props.loading) || !Boolean(props.data.length);\n\n    // Memoize the context value to prevent unnecessary re-renders\n    const contextValue = useMemo(\n        () => ({\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn: stickyFirstColumn && !hasNoData,\n        }),\n        [\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn,\n            hasNoData,\n        ]\n    );\n\n    // We need a jotai provider to isolate tables from one another.\n    return (\n        <Provider>\n            <tableStaticsContext.Provider value={contextValue}>\n                <InnerTable\n                    backgroundColor={backgroundColor}\n                    data-hui-id=\"Table\"\n                    hasNoData={hasNoData}\n                    hideDividers={hideDividers}\n                    isAdvancedPagination={isAdvancedPagination}\n                    stickyFirstColumn={stickyFirstColumn}\n                    stickyHeader={stickyHeader}\n                    {...props}\n                />\n            </tableStaticsContext.Provider>\n        </Provider>\n    );\n};\n\n// react dev tools display name\nTable.displayName = 'Table';\n\nconst InnerTable = <T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    className,\n    columns,\n    currentSort,\n    data,\n    defaultSortDirection = 'descending',\n    emptyStateHeaderText = 'Empty state heading message...',\n    emptyStateSupportingText = 'Supporting message to provide further guidance on how to remedy empty state.',\n    fillHorizontal = false,\n    hasNoData,\n    hideBorder = false,\n    hideDividers = false,\n    isAdvancedPagination,\n    loading = false,\n    onSortChange,\n    pagination,\n    rowDensity = 'md',\n    selectedRows,\n    sortable = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    zebraStripes = false,\n}: Props<T> & {\n    hasNoData: boolean;\n}) => {\n    const [showRightScrollHint, setShowRightScrollHint] = useState(false);\n    const [showLeftScrollHint, setShowLeftScrollHint] = useState(false);\n    const [showTopScrollHint, setShowTopScrollHint] = useState(false);\n    const setShowLeftShadow = useSetAtom(showLeftStickyShadowAtom);\n\n    const handleScroll = useCallback(\n        (ref: HTMLDivElement) => {\n            setShowLeftShadow(stickyFirstColumn && ref.scrollLeft > 20);\n            setShowLeftScrollHint(!stickyFirstColumn && ref.scrollLeft > 50);\n            setShowRightScrollHint(ref.scrollLeft + ref.clientWidth < ref.scrollWidth - 50);\n            setShowTopScrollHint(ref.scrollTop !== 0);\n        },\n        [setShowLeftShadow, stickyFirstColumn]\n    );\n\n    let rowHeight = 0;\n    switch (rowDensity) {\n        case 'sm':\n            rowHeight = 28;\n            break;\n        case 'md':\n            rowHeight = 36;\n            break;\n        case 'lg':\n            rowHeight = 48;\n            break;\n        default:\n            rowHeight = 36;\n            break;\n    }\n\n    // Container classes\n    const containerClasses = cn(\n        'relative max-w-full',\n        {\n            'w-full': fillHorizontal,\n            'w-min': !fillHorizontal,\n        },\n        className,\n        'table-container'\n    );\n\n    // RelativeContainer classes\n    const relativeContainerClasses = cn(\n        'relative',\n        {\n            'border border-border-secondary': !hideBorder,\n            'border-b-0': !hideDividers && !hasNoData && !hideBorder,\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // TableScroll classes\n    const tableScrollClasses = cn(\n        'w-full',\n        {\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'min-h-[220px]': loading || data.length === 0,\n            'overflow-x-auto': !hasNoData,\n            'overflow-x-hidden': hasNoData,\n            'overflow-y-auto': stickyHeader,\n            'overflow-y-visible': !stickyHeader,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // Table classes\n    const tableClasses = cn(\n        'border-collapse',\n        {\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor),\n        // Row height styles using CSS custom properties for dynamic values\n        '[&_td]:h-[var(--row-height)] [&_th]:h-[var(--row-height)]',\n        // Background color for th and td elements\n        {\n            '[&_th]:bg-background-disabled': backgroundColor === 'disabled',\n            '[&_th]:bg-background-primary': backgroundColor === 'primary' || !backgroundColor,\n            '[&_th]:bg-background-secondary': backgroundColor === 'secondary',\n            '[&_th]:bg-background-subdued': backgroundColor === 'subdued',\n            '[&_th]:bg-transparent': backgroundColor === 'transparent',\n        },\n        // Scroll hint shadows using pseudo-elements\n        '[&::before]:pointer-events-none [&::before]:absolute [&::before]:z-[1] [&::before]:content-[\"\"]',\n        '[&::before]:bottom-0 [&::before]:left-0 [&::before]:top-0 [&::before]:w-[48px]',\n        '[&::before]:opacity-0 [&::before]:transition-opacity [&::before]:duration-200',\n        '[&::before]:shadow-[8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::before]:opacity-100': showLeftScrollHint && !hasNoData,\n        },\n        '[&::after]:pointer-events-none [&::after]:absolute [&::after]:z-[1] [&::after]:content-[\"\"]',\n        '[&::after]:bottom-0 [&::after]:right-0 [&::after]:top-0 [&::after]:w-[48px]',\n        '[&::after]:opacity-0 [&::after]:transition-opacity [&::after]:duration-200',\n        '[&::after]:shadow-[-8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::after]:opacity-100': showRightScrollHint && !hasNoData,\n        }\n    );\n\n    // Empty state container classes\n    const emptyStateContainerClasses = cn(\n        'absolute flex w-full flex-col items-center justify-center py-2xl text-center'\n    );\n\n    return (\n        <div\n            className={containerClasses}\n            style={{ '--row-height': `${rowHeight}px` } as React.CSSProperties}\n        >\n            <div className={relativeContainerClasses}>\n                <div\n                    className={tableScrollClasses}\n                    ref={(ref: HTMLDivElement | null) => {\n                        if (!ref) {\n                            return;\n                        }\n\n                        // Add a scroll event listener to the table scroll container\n                        // to determine if the right scroll hint should be shown\n                        ref.addEventListener('scroll', () => {\n                            handleScroll(ref);\n                        });\n\n                        handleScroll(ref);\n                    }}\n                >\n                    <table className={tableClasses}>\n                        <TableHeader\n                            actionableCheckbox={actionableCheckbox}\n                            backgroundColor={backgroundColor}\n                            columns={columns}\n                            currentSort={currentSort}\n                            data={data}\n                            defaultSortDirection={defaultSortDirection}\n                            onSortChange={onSortChange}\n                            showTopScrollHint={showTopScrollHint}\n                            sortable={sortable}\n                            stickyHeader={stickyHeader}\n                        />\n\n                        {!loading && Boolean(data.length) && (\n                            <TableRows\n                                backgroundColor={backgroundColor}\n                                columns={columns}\n                                data={data}\n                                selectedRows={selectedRows}\n                                zebraStripes={zebraStripes}\n                            />\n                        )}\n                    </table>\n                    {!hasNoData && <TableShadow />}\n\n                    {!loading && !Boolean(data.length) && (\n                        <div className={emptyStateContainerClasses}>\n                            <H3>{emptyStateHeaderText}</H3>\n                            <BodySecondary>{emptyStateSupportingText}</BodySecondary>\n                        </div>\n                    )}\n\n                    {loading && (\n                        <div className={emptyStateContainerClasses}>\n                            <Loading size={32} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {pagination && !hasNoData && (\n                <PaginationProvider\n                    {...pagination}\n                    key={pagination.key}\n                    path=\"\"\n                >\n                    {isAdvancedPagination ? <AdvancedPagination className=\"px-0 py-sm\" /> : <TableControls />}\n                </PaginationProvider>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Table-D4UYosb1.cjs","names":["ArrowUp","usePagination","BodyPrimary","usePagination","Select","usePagination","Select","usePagination","IconButton","CaretLeft","BodyPrimary","CaretRight","BodySecondary","Checkbox","Provider","H3","BodySecondary","Loading","PaginationProvider","AdvancedPagination"],"sources":["../src/Table/sharedState.ts","../src/Table/components/TableShadow/TableShadow.tsx","../src/Table/components/TableHeader/TableHeader.tsx","../src/Table/components/TablePagination/components/ItemCountDisplay/ItemCountDisplay.tsx","../src/Table/components/TablePagination/components/ItemCountSelect/ItemCountSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/components/PageSelect/PageSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/TablePaginator.tsx","../src/Table/components/TablePagination/TablePagination.tsx","../src/Table/components/TableRow/components/TableRowCell/TableRowCell.tsx","../src/Table/components/TableRow/TableRows.tsx","../src/Table/Table.tsx"],"sourcesContent":["import { atom } from 'jotai';\nimport { createContext } from 'react';\n\ntype TableStatics = {\n    actionable: boolean;\n    backgroundColor: string | undefined;\n    hideDividers: boolean;\n    onSelectedRowsChange?: (selectedRows: string) => void;\n    pageSizeOptions: number[];\n    showColumnDividers: boolean;\n    stickyFirstColumn: boolean;\n};\n\nexport const emptyTableStatics: TableStatics = {\n    actionable: false,\n    backgroundColor: undefined,\n    hideDividers: false,\n    pageSizeOptions: [],\n    showColumnDividers: false,\n    stickyFirstColumn: false,\n};\n\nexport const tableStaticsContext = createContext<TableStatics>(emptyTableStatics);\n\n/**\n * This should be the manually sorted column key.\n *\n * It is not guaranteed to match the true sorting of the table.\n */\nexport const sortedColumnKey = atom<string | undefined>(undefined);\n","import { cn } from '@evolve.ui/theme-system';\nimport { atom, useAtomValue } from 'jotai';\nimport { useContext } from 'react';\n\nimport { tableStaticsContext } from '../../sharedState';\nimport { actionableWidth } from '../../sharedStyles';\n\nexport const showLeftStickyShadowAtom = atom<boolean>(false);\nexport const leftStickyShadowWidthAtom = atom<number>(0);\n\n/**\n * This component adds the left hand shadow to the table element for the sticky first column.\n */\nexport const TableShadow = () => {\n    const { actionable, stickyFirstColumn } = useContext(tableStaticsContext);\n    const width = useAtomValue(leftStickyShadowWidthAtom);\n    const showLeftStickyShadow = useAtomValue(showLeftStickyShadowAtom);\n\n    return (\n        <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n            <div\n                className={cn(\n                    'pointer-events-none absolute bottom-0 left-0 top-0 opacity-100 shadow-04 transition-opacity duration-300',\n                    {\n                        'opacity-0': !stickyFirstColumn || !showLeftStickyShadow,\n                    }\n                )}\n                style={{ width: `${actionable ? width + actionableWidth : width}px` }}\n            />\n        </div>\n    );\n};\n\nexport const observeFirstColumnWidth = (setLeftShadowWidth: (width: number) => void) => (ref: HTMLElement | null) => {\n    if (ref) {\n        // Add a resize observer to the first column to determine the width of the left shadow.\n        const resizeObserver = new ResizeObserver((entries) => {\n            const width = entries[0].contentRect.width;\n            setLeftShadowWidth(width);\n        });\n\n        resizeObserver.observe(ref);\n\n        setLeftShadowWidth(ref.getBoundingClientRect().width);\n    }\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useSetAtom } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { ArrowUp } from '../../../Icons';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle } from '../../types';\nimport { leftStickyShadowWidthAtom, observeFirstColumnWidth } from '../TableShadow/TableShadow';\n\ninterface Props<T extends StaticData> {\n    actionableCheckbox: ReactNode;\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    currentSort?: [string, SortType];\n    data: T[];\n    defaultSortDirection: SortType;\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    showTopScrollHint: boolean;\n    sortable: boolean;\n    stickyHeader: boolean;\n}\n\nexport function TableHeader<T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    columns,\n    currentSort,\n    defaultSortDirection,\n    onSortChange,\n    showTopScrollHint,\n    sortable,\n    stickyHeader,\n}: Props<T>) {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const setLeftShadowWidth = useSetAtom(leftStickyShadowWidthAtom);\n\n    const tableBackgroundColor: TableBackgroundStyle =\n        backgroundColor === 'transparent' && stickyHeader ? 'primary' : 'transparent';\n\n    return (\n        <thead>\n            <tr\n                className={cn('relative border-b border-border-primary', {\n                    // BACKGROUND COLOR\n                    'bg-background-primary': tableBackgroundColor === 'primary',\n                    'bg-transparent': tableBackgroundColor === 'transparent',\n                    'shadow-01': stickyHeader && showTopScrollHint,\n                    // STICKY HEADER\n                    'sticky top-0 z-[5]': stickyHeader,\n                })}\n                style={{\n                    transition: stickyHeader ? '0.25s' : undefined,\n                }}\n            >\n                {actionable && (\n                    <th\n                        className={cn(\n                            'hui-text-label-strong bg-background-primary p-0 transition-colors duration-200',\n                            {\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                            }\n                        )}\n                        key=\"actionable\"\n                        scope=\"col\"\n                        style={\n                            stickyFirstColumn\n                                ? {\n                                      left: 0,\n                                      paddingLeft: '14px',\n                                      position: 'sticky',\n                                      zIndex: 1,\n                                  }\n                                : {}\n                        }\n                    >\n                        {actionableCheckbox}\n                    </th>\n                )}\n                {columns.map((column, i) => {\n                    const newDirection =\n                        currentSort && currentSort[0] === column.key\n                            ? currentSort[1] === 'ascending'\n                                ? 'descending'\n                                : 'ascending'\n                            : defaultSortDirection;\n\n                    let ariaSort: undefined | 'none' | 'ascending' | 'descending' = undefined;\n\n                    if (currentSort && currentSort[0] === column.key) {\n                        ariaSort = currentSort[1];\n                    } else if (column.sortable) {\n                        ariaSort = 'none';\n                    }\n\n                    const isFirstColumn = i === 0;\n                    const isStickyFirstColumn = stickyFirstColumn && isFirstColumn;\n\n                    return (\n                        <th\n                            aria-sort={ariaSort}\n                            className={cn('hui-text-label-strong relative p-0 transition-colors duration-200', {\n                                'active:bg-background-pressed': sortable && column.sortable,\n                                // BACKGROUND COLOR\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                // SORTABLE STATES\n                                'group cursor-pointer': sortable && column.sortable,\n                                'hover:bg-background-hover': sortable && column.sortable,\n                                // STICKY FIRST COLUMN\n                                'sticky z-[1] shadow-02': isStickyFirstColumn,\n                            })}\n                            // Using the index as the key is fine here because the columns won't change.\n                            key={i}\n                            onClick={\n                                sortable && column.sortable && onSortChange\n                                    ? () => onSortChange(column.key as string, newDirection)\n                                    : undefined\n                            }\n                            ref={i === 0 ? observeFirstColumnWidth(setLeftShadowWidth) : undefined}\n                            scope=\"col\"\n                            style={\n                                isStickyFirstColumn\n                                    ? {\n                                          left: actionable ? '48px' : '0',\n                                          transform: 'translateX(-1px)',\n                                      }\n                                    : {}\n                            }\n                        >\n                            <span\n                                className={cn('flex items-center gap-xs whitespace-nowrap px-sm', {\n                                    'justify-end': column.align === 'right',\n                                    'justify-start': column.align !== 'right',\n                                })}\n                            >\n                                {column.header ?? null}\n                                {sortable && column.sortable && (\n                                    <ArrowUp\n                                        className={cn('transition-all duration-200', {\n                                            'group-hover:rotate-0': ariaSort === 'descending',\n                                            'group-hover:rotate-180': ariaSort === 'ascending',\n                                            // HOVER STATE - Show on hover for unsorted columns\n                                            'group-hover:visible group-hover:opacity-100': ariaSort === 'none',\n                                            // DEFAULT STATE - Hidden for unsorted columns\n                                            'invisible opacity-0': ariaSort === 'none',\n                                            // ASCENDING STATE - Always visible, rotate on hover\n                                            'visible opacity-100': ariaSort === 'ascending',\n                                            // DESCENDING STATE - Always visible and rotated, rotate back on hover\n                                            'visible rotate-180 opacity-100': ariaSort === 'descending',\n                                        })}\n                                        size=\"sm\"\n                                    />\n                                )}\n                            </span>\n                        </th>\n                    );\n                })}\n            </tr>\n        </thead>\n    );\n}\n","import { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\n\nexport const ItemCountDisplay = () => {\n    const { itemCount, page, pageSize } = usePagination();\n\n    if (pageSize === 'all') {\n        return <BodyPrimary>{itemCount} Items</BodyPrimary>;\n    }\n\n    return (\n        <BodyPrimary>{`${(page - 1) * pageSize + 1} - ${Math.min(\n            page * pageSize,\n            itemCount\n        )} of ${itemCount} Items`}</BodyPrimary>\n    );\n};\n","import { useContext, useMemo } from 'react';\n\nimport { usePagination } from '../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../Select/Select';\nimport { tableStaticsContext } from '../../../../sharedState';\n\nexport const ItemCountSelect = () => {\n    const { pageSize, setPageSize } = usePagination();\n    const { pageSizeOptions } = useContext(tableStaticsContext);\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=\"w-[232px]\"\n            defaultValue={pageSize}\n            isInsideLabel\n            labelText=\"Items per page:\"\n            onChange={(event?: OptionType) => setPageSize(event?.value)}\n            options={generatedOptions}\n            small\n            usePortalMenu\n            value={{ label: pageSize, value: pageSize.toString() }}\n        />\n    );\n};\n","import { useMemo } from 'react';\n\nimport { usePagination } from '../../../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../../../Select/Select';\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            defaultValue={pageCount}\n            isInsideLabel\n            labelText=\"Page\"\n            onChange={(event?: OptionType) => goToPage(event?.value)}\n            options={options}\n            small\n            usePortalMenu\n            value={options[page - 1]}\n        />\n    );\n};\n","import { IconButton } from '../../../../../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../../../../../Icons';\nimport { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\nimport { PageSelect } from './components/PageSelect/PageSelect';\n\nexport const Pagination = () => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    return (\n        <div className=\"flex items-center\">\n            <IconButton\n                aria-label=\"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 pl-xs pr-sm\">of {pageCount} pages</BodyPrimary>\n            <IconButton\n                aria-label=\"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 { ItemCountDisplay } from './components/ItemCountDisplay/ItemCountDisplay';\nimport { ItemCountSelect } from './components/ItemCountSelect/ItemCountSelect';\nimport { Pagination } from './components/TablePaginator/TablePaginator';\n\nexport const TableControls = () => {\n    return (\n        <div\n            className=\"flex items-center justify-between pt-4\"\n            data-hui-id=\"TableControls\"\n        >\n            <ItemCountSelect />\n            <ItemCountDisplay />\n            <Pagination />\n        </div>\n    );\n};\n\nTableControls.displayName = 'TableControls';\n","import { cn } from '@evolve.ui/theme-system';\nimport { useContext } from 'react';\n\nimport { BodySecondary } from '../../../../../Typography/Text/Text';\nimport { tableStaticsContext } from '../../../../sharedState';\nimport { ColumnType, StaticData } from '../../../../types';\n\ninterface Props<T extends StaticData> {\n    backgroundColor: 'primary' | 'secondary' | 'subdued' | 'disabled' | 'transparent';\n    column: ColumnType<T>;\n    columnIndex: number;\n    item: T;\n}\n\nexport const TableRowCell = <T extends StaticData>({ backgroundColor, column, columnIndex, item }: Props<T>) => {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const value = item[column.key];\n\n    return (\n        <td\n            className={cn('whitespace-nowrap px-sm py-0', {\n                'bg-background-disabled': backgroundColor === 'disabled',\n                'bg-background-primary': backgroundColor === 'primary',\n                'bg-background-secondary': backgroundColor === 'secondary',\n                'bg-background-subdued': backgroundColor === 'subdued',\n                'bg-transparent': backgroundColor === 'transparent',\n                // COLUMN DIVIDER\n                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                //   HOVER\n                'group-hover:bg-surface-200 group-active:bg-surface-300': !item.disabled,\n                // Add relative positioning for sticky columns to support the background fix\n                relative: stickyFirstColumn && columnIndex === 0,\n                // For non-actionable tables, first column can be at left-0\n                'sticky left-0 z-[2]': stickyFirstColumn && columnIndex === 0 && !actionable,\n                // For actionable tables, first column should be positioned after the checkbox (48px width)\n                'sticky left-xl z-[2]': stickyFirstColumn && columnIndex === 0 && actionable,\n                'sticky-column': stickyFirstColumn && columnIndex === 0,\n                'text-left': !column.align || column.align === 'left',\n                'text-right': column.align === 'right',\n            })}\n        >\n            {Boolean(column.renderItem) ? (\n                column.renderItem?.(item, column)\n            ) : (\n                <BodySecondary color={Boolean(item.disabled) ? 'disabled' : 'primary'}>{value as string}</BodySecondary>\n            )}\n        </td>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport { Checkbox } from '../../../ChoiceListItem';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, StaticData, TableBackgroundStyle } from '../../types';\nimport { TableRowCell } from './components/TableRowCell/TableRowCell';\n\ninterface Props<T extends StaticData> {\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    data: T[];\n    selectedRows?: Set<T['key']>;\n    zebraStripes: boolean;\n}\n\nexport const TableRows = <T extends StaticData>({\n    backgroundColor = 'primary',\n    columns,\n    data,\n    selectedRows,\n    zebraStripes,\n}: Props<T>) => {\n    const { actionable, hideDividers, onSelectedRowsChange, showColumnDividers, stickyFirstColumn } =\n        useContext(tableStaticsContext);\n\n    const onRowClick = useCallback(\n        (event: MouseEvent<HTMLTableRowElement>) => {\n            if (actionable) {\n                const checkbox = event.currentTarget.querySelector('input[type=\"checkbox\"]') as HTMLElement | undefined;\n\n                checkbox?.click();\n            }\n        },\n        [actionable]\n    );\n\n    const formattedData = useMemo(() => {\n        return data.map((item) => {\n            const renderedColumns = columns.map((column, columnIndex) => (\n                <TableRowCell\n                    backgroundColor={backgroundColor}\n                    column={column}\n                    columnIndex={columnIndex}\n                    item={item}\n                    key={`table-row-cell-${columnIndex}`}\n                />\n            ));\n\n            const isOdd = data.indexOf(item) % 2 !== 0;\n            const shouldShowZebraStripe = zebraStripes && isOdd;\n            const isSelectedNotDisabled = selectedRows && selectedRows.has(item.key) && !item.disabled;\n\n            return (\n                <tr\n                    // BASE\n                    className={cn(\n                        'group relative cursor-default bg-background-primary',\n\n                        //  BACKGROUND COLORS\n                        {\n                            'bg-background-disabled': backgroundColor === 'disabled',\n                            'bg-background-primary': backgroundColor === 'primary' && !zebraStripes,\n                            'bg-background-secondary': backgroundColor === 'secondary',\n                            'bg-background-subdued': backgroundColor === 'subdued',\n                            'bg-transparent': backgroundColor === 'transparent',\n                        },\n                        {\n                            '[&>td]:bg-background-disabled': backgroundColor === 'disabled' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-inverse/[0.03]':\n                                backgroundColor === 'transparent' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-secondary': backgroundColor === 'secondary' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-subdued':\n                                (backgroundColor === 'primary' || backgroundColor === 'subdued') &&\n                                shouldShowZebraStripe,\n                        },\n                        {\n                            // HIGHLIGHTED - exclude sticky columns since they handle their own states\n                            '!bg-background-secondary [&>td]:bg-background-secondary': isSelectedNotDisabled,\n\n                            // DIVIDERS\n                            'border-b border-border-secondary': !hideDividers,\n                            // ACTIONABLE\n                            'cursor-pointer': actionable && !item.disabled,\n                        }\n                    )}\n                    data-disabled={item.disabled ? 'true' : undefined}\n                    key={item.key}\n                    onClick={onRowClick}\n                >\n                    {actionable && (\n                        <td\n                            className={cn(\n                                'bg-background-primary p-0',\n                                {\n                                    // COLUMN DIVIDER\n                                    'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                    // Direct hover/active states for sticky column\n                                    'group-hover:!bg-surface-200 group-active:!bg-surface-300': !item.disabled,\n                                    'sticky left-0 z-[3]': stickyFirstColumn,\n                                    'sticky-column': stickyFirstColumn,\n                                },\n                                {\n                                    // Selected state for sticky column\n                                    'bg-background-secondary':\n                                        stickyFirstColumn &&\n                                        selectedRows &&\n                                        selectedRows.has(item.key) &&\n                                        !item.disabled,\n                                }\n                            )}\n                            key=\"actionable\"\n                            onClick={(e) => e.stopPropagation()}\n                        >\n                            <Checkbox.Option\n                                checked={selectedRows ? selectedRows.has(item.key) : false}\n                                className={cn('flex h-full w-xl items-center justify-center', {\n                                    'group-hover:[&>svg]:!bg-surface-200 group-active:[&>svg]:!border-border-hover':\n                                        !item.disabled,\n                                })}\n                                disabled={Boolean(item.disabled)}\n                                onChange={() => {\n                                    onSelectedRowsChange?.(item.key);\n                                }}\n                            />\n                        </td>\n                    )}\n                    {renderedColumns}\n                </tr>\n            );\n        });\n    }, [\n        actionable,\n        backgroundColor,\n        columns,\n        data,\n        hideDividers,\n        onRowClick,\n        onSelectedRowsChange,\n        selectedRows,\n        showColumnDividers,\n        stickyFirstColumn,\n        zebraStripes,\n    ]);\n\n    return <tbody>{formattedData}</tbody>;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { Provider, useSetAtom } from 'jotai';\nimport { ComponentProps, ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { Loading } from '../Loading/Loading';\nimport { AdvancedPagination, PaginationProvider } from '../Pagination';\nimport { BodySecondary, H3 } from '../Typography/Text/Text';\nimport { TableHeader } from './components/TableHeader/TableHeader';\nimport { TableControls } from './components/TablePagination/TablePagination';\nimport { TableRows } from './components/TableRow/TableRows';\nimport { showLeftStickyShadowAtom, TableShadow } from './components/TableShadow/TableShadow';\nimport { tableStaticsContext } from './sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle, TableRowDensity } from './types';\n\ntype Props<T extends StaticData> = {\n    /**\n     * Adds a checkbox to the left of each row and in the header.\n     * When checked, the row is considered selected.\n     *\n     * @see `onSelectedRowsChange`\n     */\n    actionable?: boolean;\n    /**\n     * This checkbox goes in the top left of your table.\n     *\n     * You can use this to \"select all\" however you'd like.\n     *\n     * Needs `actionable` to be true to show.\n     */\n    actionableCheckbox?: ReactNode;\n    /**\n     * Background color style for the table.\n     * Options: 'primary', 'secondary', 'subdued', 'disabled', or 'transparent'.\n     *\n     * primary - Uses theme.color.background.primary\n     * secondary - Uses theme.color.background.secondary\n     * subdued - Uses theme.color.background.subdued\n     * disabled - Uses theme.color.background.disabled\n     * transparent - Uses transparent background\n     *\n     * @default 'primary'\n     */\n    backgroundColor?: TableBackgroundStyle;\n    className?: string;\n    /**\n     * Specification for the columns of the table.\n     * Includes how to render each item in the column.\n     */\n    columns: ColumnType<T>[];\n    /**\n     * Whether we're currently sorting by anything, and if so, what.\n     *\n     * The first item in the tuple is the column key, and the second is the sort direction.\n     *\n     * @see `onSortChange`\n     */\n    currentSort?: undefined | [string, SortType];\n    /**\n     * The rows of data to be displayed in the table.\n     */\n    data: T[];\n    /**\n     * The default sort direction for columns that are sortable.\n     */\n    defaultSortDirection?: SortType;\n    /**\n     * The text to display when there is no data.\n     */\n    emptyStateHeaderText?: string;\n    /**\n     * The supporting text to display when there is no data.\n     */\n    emptyStateSupportingText?: string;\n    /**\n     * Whether or not to fill the width of the container.\n     *\n     * Gives equal extra space to each column.\n     */\n    fillHorizontal?: boolean;\n    /**\n     * Whether or not to show the border on the main table.\n     */\n    hideBorder?: boolean;\n    /**\n     * Whether or not to hide the dividers between rows.\n     */\n    hideDividers?: boolean;\n    /**\n     * Boolean to use advance pagination component\n     */\n    isAdvancedPagination?: boolean;\n    /**\n     * Whether or not to show a loading indicator.\n     */\n    loading?: boolean;\n    /**\n     * Callback when the selected rows change.\n     *\n     * @param selectedRows the selected rows in the form of a map of row keys to booleans\n     */\n    onSelectedRowsChange?: (selectedRow: T['key']) => void;\n    /**\n     * Callback when the sort status of a column changes.\n     *\n     * @param columnKey The key of the column that was clicked\n     * @param newSort The new sort status of the column\n     * @see `currentSort`\n     */\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    /**\n     * The page size options for the pagination component.\n     */\n    pageSizeOptions?: number[];\n    /**\n     * If provided, the table will add a pagination component.\n     *\n     * @see `PaginationProvider`\n     */\n    pagination?: Omit<ComponentProps<typeof PaginationProvider>, 'path' | 'children'> & {\n        /**\n         * The key of the pagination provider.\n         *\n         * This is used to ensure that the pagination provider is only re-rendered when the key changes.\n         * @example key={`${currentPage}-${pageSize}-${itemCount}`}\n         */\n        key?: string;\n    };\n    /**\n     * The height of the rows in the table.\n     * - `sm` = 28px\n     * - `md` = 36px\n     * - `lg` = 48px\n     *\n     * @default md\n     */\n    rowDensity?: TableRowDensity;\n    /**\n     * The rows that are currently selected.\n     *\n     * This is a controlled prop.\n     */\n    selectedRows?: Set<T['key']>;\n    /**\n     * Adds vertical dividers between columns in both header and body cells,\n     * including the actionable checkbox column. Combine with the default row\n     * dividers (`hideDividers={false}`) and outer border (`hideBorder={false}`)\n     * for a fully bordered grid.\n     *\n     * @default false\n     */\n    showColumnDividers?: boolean;\n    /**\n     * Whether or not the columns are sortable.\n     *\n     * @see `onSortChange`\n     * @see `currentSort`\n     */\n    sortable?: boolean;\n    /**\n     * Locks the first column on horizontal scroll.\n     */\n    stickyFirstColumn?: boolean;\n    /**\n     * Make header sticky when table height is set.\n     *\n     * @default false\n     *\n     * .table-container {\n     *   height: calc(100vh - 200px);\n     * }\n     */\n    stickyHeader?: boolean;\n    /**\n     * Adds a zebra stripe to every other row.\n     */\n    zebraStripes?: boolean;\n};\n\n/**\n * Helper function to get background color classes based on TableBackgroundStyle\n */\nconst getBackgroundColorClasses = (backgroundColor?: TableBackgroundStyle, isZebraStripe = false) => {\n    if (!backgroundColor) {\n        return 'bg-background-primary';\n    }\n\n    switch (backgroundColor) {\n        case 'secondary':\n            return 'bg-background-secondary';\n        case 'subdued':\n            return 'bg-background-subdued';\n        case 'disabled':\n            return 'bg-background-disabled';\n        case 'transparent':\n            return 'bg-transparent';\n        case 'primary':\n            if (isZebraStripe) {\n                return 'bg-background-subdued';\n            }\n            return 'bg-background-primary';\n        default:\n            return 'bg-background-primary';\n    }\n};\n\nexport const Table = <T extends StaticData>({\n    actionable = false,\n    backgroundColor,\n    hideDividers = false,\n    isAdvancedPagination,\n    onSelectedRowsChange,\n    pageSizeOptions = [25, 50, 100],\n    showColumnDividers = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    ...props\n}: Props<T>) => {\n    const hasNoData = Boolean(props.loading) || !Boolean(props.data.length);\n\n    // Memoize the context value to prevent unnecessary re-renders\n    const contextValue = useMemo(\n        () => ({\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn: stickyFirstColumn && !hasNoData,\n        }),\n        [\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn,\n            hasNoData,\n        ]\n    );\n\n    // We need a jotai provider to isolate tables from one another.\n    return (\n        <Provider>\n            <tableStaticsContext.Provider value={contextValue}>\n                <InnerTable\n                    backgroundColor={backgroundColor}\n                    data-hui-id=\"Table\"\n                    hasNoData={hasNoData}\n                    hideDividers={hideDividers}\n                    isAdvancedPagination={isAdvancedPagination}\n                    stickyFirstColumn={stickyFirstColumn}\n                    stickyHeader={stickyHeader}\n                    {...props}\n                />\n            </tableStaticsContext.Provider>\n        </Provider>\n    );\n};\n\n// react dev tools display name\nTable.displayName = 'Table';\n\nconst InnerTable = <T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    className,\n    columns,\n    currentSort,\n    data,\n    defaultSortDirection = 'descending',\n    emptyStateHeaderText = 'Empty state heading message...',\n    emptyStateSupportingText = 'Supporting message to provide further guidance on how to remedy empty state.',\n    fillHorizontal = false,\n    hasNoData,\n    hideBorder = false,\n    hideDividers = false,\n    isAdvancedPagination,\n    loading = false,\n    onSortChange,\n    pagination,\n    rowDensity = 'md',\n    selectedRows,\n    sortable = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    zebraStripes = false,\n}: Props<T> & {\n    hasNoData: boolean;\n}) => {\n    const [showRightScrollHint, setShowRightScrollHint] = useState(false);\n    const [showLeftScrollHint, setShowLeftScrollHint] = useState(false);\n    const [showTopScrollHint, setShowTopScrollHint] = useState(false);\n    const setShowLeftShadow = useSetAtom(showLeftStickyShadowAtom);\n\n    const handleScroll = useCallback(\n        (ref: HTMLDivElement) => {\n            setShowLeftShadow(stickyFirstColumn && ref.scrollLeft > 20);\n            setShowLeftScrollHint(!stickyFirstColumn && ref.scrollLeft > 50);\n            setShowRightScrollHint(ref.scrollLeft + ref.clientWidth < ref.scrollWidth - 50);\n            setShowTopScrollHint(ref.scrollTop !== 0);\n        },\n        [setShowLeftShadow, stickyFirstColumn]\n    );\n\n    let rowHeight = 0;\n    switch (rowDensity) {\n        case 'sm':\n            rowHeight = 28;\n            break;\n        case 'md':\n            rowHeight = 36;\n            break;\n        case 'lg':\n            rowHeight = 48;\n            break;\n        default:\n            rowHeight = 36;\n            break;\n    }\n\n    // Container classes\n    const containerClasses = cn(\n        'relative max-w-full',\n        {\n            'w-full': fillHorizontal,\n            'w-min': !fillHorizontal,\n        },\n        className,\n        'table-container'\n    );\n\n    // RelativeContainer classes\n    const relativeContainerClasses = cn(\n        'relative',\n        {\n            'border border-border-secondary': !hideBorder,\n            'border-b-0': !hideDividers && !hasNoData && !hideBorder,\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // TableScroll classes\n    const tableScrollClasses = cn(\n        'w-full',\n        {\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'min-h-[220px]': loading || data.length === 0,\n            'overflow-x-auto': !hasNoData,\n            'overflow-x-hidden': hasNoData,\n            'overflow-y-auto': stickyHeader,\n            'overflow-y-visible': !stickyHeader,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // Table classes\n    const tableClasses = cn(\n        'border-collapse',\n        {\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor),\n        // Row height styles using CSS custom properties for dynamic values\n        '[&_td]:h-[var(--row-height)] [&_th]:h-[var(--row-height)]',\n        // Background color for th and td elements\n        {\n            '[&_th]:bg-background-disabled': backgroundColor === 'disabled',\n            '[&_th]:bg-background-primary': backgroundColor === 'primary' || !backgroundColor,\n            '[&_th]:bg-background-secondary': backgroundColor === 'secondary',\n            '[&_th]:bg-background-subdued': backgroundColor === 'subdued',\n            '[&_th]:bg-transparent': backgroundColor === 'transparent',\n        },\n        // Scroll hint shadows using pseudo-elements\n        '[&::before]:pointer-events-none [&::before]:absolute [&::before]:z-[1] [&::before]:content-[\"\"]',\n        '[&::before]:bottom-0 [&::before]:left-0 [&::before]:top-0 [&::before]:w-[48px]',\n        '[&::before]:opacity-0 [&::before]:transition-opacity [&::before]:duration-200',\n        '[&::before]:shadow-[8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::before]:opacity-100': showLeftScrollHint && !hasNoData,\n        },\n        '[&::after]:pointer-events-none [&::after]:absolute [&::after]:z-[1] [&::after]:content-[\"\"]',\n        '[&::after]:bottom-0 [&::after]:right-0 [&::after]:top-0 [&::after]:w-[48px]',\n        '[&::after]:opacity-0 [&::after]:transition-opacity [&::after]:duration-200',\n        '[&::after]:shadow-[-8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::after]:opacity-100': showRightScrollHint && !hasNoData,\n        }\n    );\n\n    // Empty state container classes\n    const emptyStateContainerClasses = cn(\n        'absolute flex w-full flex-col items-center justify-center py-2xl text-center'\n    );\n\n    return (\n        <div\n            className={containerClasses}\n            style={{ '--row-height': `${rowHeight}px` } as React.CSSProperties}\n        >\n            <div className={relativeContainerClasses}>\n                <div\n                    className={tableScrollClasses}\n                    ref={(ref: HTMLDivElement | null) => {\n                        if (!ref) {\n                            return;\n                        }\n\n                        // Add a scroll event listener to the table scroll container\n                        // to determine if the right scroll hint should be shown\n                        ref.addEventListener('scroll', () => {\n                            handleScroll(ref);\n                        });\n\n                        handleScroll(ref);\n                    }}\n                >\n                    <table className={tableClasses}>\n                        <TableHeader\n                            actionableCheckbox={actionableCheckbox}\n                            backgroundColor={backgroundColor}\n                            columns={columns}\n                            currentSort={currentSort}\n                            data={data}\n                            defaultSortDirection={defaultSortDirection}\n                            onSortChange={onSortChange}\n                            showTopScrollHint={showTopScrollHint}\n                            sortable={sortable}\n                            stickyHeader={stickyHeader}\n                        />\n\n                        {!loading && Boolean(data.length) && (\n                            <TableRows\n                                backgroundColor={backgroundColor}\n                                columns={columns}\n                                data={data}\n                                selectedRows={selectedRows}\n                                zebraStripes={zebraStripes}\n                            />\n                        )}\n                    </table>\n                    {!hasNoData && <TableShadow />}\n\n                    {!loading && !Boolean(data.length) && (\n                        <div className={emptyStateContainerClasses}>\n                            <H3>{emptyStateHeaderText}</H3>\n                            <BodySecondary>{emptyStateSupportingText}</BodySecondary>\n                        </div>\n                    )}\n\n                    {loading && (\n                        <div className={emptyStateContainerClasses}>\n                            <Loading size={32} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {pagination && !hasNoData && (\n                <PaginationProvider\n                    {...pagination}\n                    key={pagination.key}\n                    path=\"\"\n                >\n                    {isAdvancedPagination ? <AdvancedPagination className=\"px-0 py-sm\" /> : <TableControls />}\n                </PaginationProvider>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/Typography/InlineButton.cjs

@@ -27,7 +27,7 @@ const InlineButton = (0, react.forwardRef)(({ children, className, disabled = fa
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		"aria-busy": loading,
 		"aria-live": "polite",
-		className: (0, _evolve_ui_theme_system.cn)("hui-text-body-primary inline-flex w-min cursor-pointer items-center gap-2xs whitespace-nowrap border-none bg-transparent p-0 tracking-[0.5px] outline-none", "focus-visible:hui-focus-visible-outline focus-visible:underline", { "focus-visible:hui-focus-visible-outline-inverse": style === "inverse" }, "hover:underline", { "hover:no-underline": disabled || loading }, "disabled:cursor-not-allowed disabled:text-text-disabled", "h-[24px] text-base", {
+		className: (0, _evolve_ui_theme_system.cn)("hui-text-body-primary inline-flex w-min cursor-pointer items-center gap-2xs whitespace-nowrap border-none bg-transparent p-0 tracking-[0.5px] outline-none", "hui-focus-visible-outline focus-visible:underline", { "hui-focus-visible-outline-inverse": style === "inverse" }, "hover:underline", { "hover:no-underline": disabled || loading }, "disabled:cursor-not-allowed disabled:text-text-disabled", "h-[24px] text-base", {
 			"h-[20px] text-xs leading-4": size === "xs",
 			"h-[22px] text-sm leading-5": size === "sm"
 		}, {