@lifesg/react-design-system 3.5.0-canary.4 → 3.5.0-canary.6

package/data-table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport {\n    ActionBar,\n    ActionBarSpacer,\n    ActionBarWrapper,\n    BodyCell,\n    BodyCellContent,\n    BodyRow,\n    CheckBoxWrapper,\n    EmptyViewCell,\n    ErrorDisplayTitle,\n    HeaderCell,\n    HeaderCellWrapper,\n    HeaderRow,\n    LoaderWrapper,\n    Table,\n    TableBody,\n    TableContainer,\n    TableHead,\n    TableWrapper,\n    TextButton,\n} from \"./data-table.styles\";\nimport { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n    id,\n    headers,\n    rows,\n    className,\n    sortIndicators,\n    alternatingRows,\n    loadState = \"success\",\n    enableMultiSelect,\n    selectedIds,\n    disabledIds,\n    enableActionBar,\n    enableSelectAll,\n    enableStickyHeader,\n    emptyView,\n    actionBarContent,\n    renderCustomEmptyView,\n    onHeaderClick,\n    onSelect,\n    onSelectAll,\n    onClearSelectionClick,\n    ...otherProps\n}: DataTableProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const tableRef = useRef<HTMLTableElement>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const keyColumns = headers.filter(\n        (header): header is Exclude<HeaderProps, string> => {\n            return typeof header !== \"string\" && !!header.keyColumn;\n        }\n    );\n\n    const [actionBarStrategy, setActionBarStrategy] = useState<\n        \"sticky\" | \"fixed\" | \"inline\"\n    >(\"inline\");\n    const [scrollable, setScrollable] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const useUpdateActionBarBehaviour = useEvent(() => {\n        updateActionBarBehaviour();\n    });\n\n    useEffect(() => {\n        useUpdateActionBarBehaviour();\n    }, [useUpdateActionBarBehaviour]);\n\n    const updateActionBarBehaviourThrottled = useThrottle(\n        () => updateActionBarBehaviour(),\n        100\n    );\n\n    useResizeDetector({\n        targetRef: wrapperRef,\n        onResize: () => updateActionBarBehaviourThrottled(),\n    });\n\n    useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n    useEventListener(\n        \"scroll\",\n        updateActionBarBehaviourThrottled,\n        wrapperRef.current\n    );\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length || !selectedIds;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const getHeaderWrapperId = (fieldKey: string) => {\n        return `${internalId}-header-${fieldKey}`;\n    };\n    const getCellId = (rowId: string, fieldKey: string) => {\n        return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n    };\n\n    const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n        const keyColumnIds = keyColumns.map((header) =>\n            getCellId(rowId, header.fieldKey)\n        );\n\n        return concatIds(...keyColumnIds);\n    };\n\n    const updateActionBarBehaviour = () => {\n        if (\n            !wrapperRef.current ||\n            !headerRef.current ||\n            !actionBarWrapperRef.current\n        ) {\n            return;\n        }\n\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        const headerBounds = headerRef.current.getBoundingClientRect();\n\n        let strategy: typeof actionBarStrategy = \"inline\";\n\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n        if (\n            wrapperBounds.top > window.innerHeight ||\n            wrapperBounds.bottom < 0\n        ) {\n            // if fully out of the viewport, disable floating\n            strategy = \"inline\";\n        } else if (scrollable) {\n            if (\n                wrapperBounds.top > 0 &&\n                wrapperBounds.top < window.innerHeight &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if fully in the viewport, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.top < 0 &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if partially offscreen at the top, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.bottom > window.innerHeight &&\n                Math.max(wrapperBounds.top, headerBounds.bottom) +\n                    headerBounds.height <\n                    window.innerHeight\n            ) {\n                // if offscreen at the bottom, pin to the viewport, up until the table/header\n                strategy = \"fixed\";\n            }\n        } else if (\n            wrapperBounds.bottom > window.innerHeight &&\n            headerBounds.bottom + headerBounds.height < window.innerHeight\n        ) {\n            // if offscreen at the bottom, pin to the viewport, up until the header\n            strategy = \"fixed\";\n        }\n\n        setScrollable(scrollable);\n        setActionBarStrategy(strategy);\n\n        if (strategy === \"fixed\") {\n            setIsFloatingActionBar(true);\n        } else if (strategy === \"sticky\") {\n            const beforeScrollEnd =\n                wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n                wrapperRef.current.scrollHeight;\n            setIsFloatingActionBar(beforeScrollEnd);\n        } else {\n            setIsFloatingActionBar(false);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleHeaderClick = (fieldKey: string) => {\n        onHeaderClick?.(fieldKey);\n    };\n\n    const handleHeaderButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>,\n        fieldKey: string\n    ) => {\n        event.stopPropagation();\n        onHeaderClick?.(fieldKey);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <TableHead ref={headerRef} $stickyHeader={enableStickyHeader}>\n            <HeaderRow>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </HeaderRow>\n        </TableHead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        const isSortable = !!getSortDirection(fieldKey);\n        const headerCellWrapperId = getHeaderWrapperId(fieldKey);\n\n        return (\n            <HeaderCell\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                $clickable={clickable}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                $isCheckbox={false}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <HeaderCellWrapper id={headerCellWrapperId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </HeaderCellWrapper>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellWrapperId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </HeaderCell>\n        );\n    };\n\n    const renderSortedArrow = (fieldKey: string) => {\n        const isSorted = sortIndicators?.[fieldKey];\n\n        if (!isSorted) {\n            return <></>;\n        }\n        if (isSorted === \"asc\") {\n            return (\n                <ArrowUpIcon\n                    aria-hidden\n                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\n                aria-hidden\n                data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n            />\n        );\n    };\n\n    const renderHeaderCheckBox = () => {\n        return (\n            <HeaderCell\n                data-testid={getDataTestId(\"header-selection\")}\n                $clickable={false}\n                $isCheckbox={true}\n                scope=\"col\"\n            >\n                <CheckBoxWrapper>\n                    <VisuallyHidden>Row selection</VisuallyHidden>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </CheckBoxWrapper>\n            </HeaderCell>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <BodyRow $alternating={false}>\n                <EmptyViewCell colSpan={getTotalColumns()}>\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </EmptyViewCell>\n            </BodyRow>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <BodyRow\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        $showLastRowBottomBorder={isFloatingActionBar}\n                        $alternating={isAlternatingRow(index)}\n                        $isSelectable={enableMultiSelect}\n                        $isSelected={isRowSelected(row.id.toString())}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </BodyRow>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header !== \"string\" ? header.style : undefined;\n        const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n        const rowId = row.id.toString();\n        const cellData = row[fieldKey];\n        const cellId = `${rowId}-${fieldKey}`;\n\n        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                style={style}\n                $isCheckbox={false}\n            >\n                {typeof cellData === \"string\" ||\n                typeof cellData === \"number\" ? (\n                    <BodyCellContent>{cellData}</BodyCellContent>\n                ) : typeof cellData === \"function\" ? (\n                    cellData(row, { isSelected: isRowSelected(rowId) })\n                ) : (\n                    cellData\n                )}\n            </BodyCell>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                $isCheckbox={true}\n            >\n                <CheckBoxWrapper>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                        focusableWhenDisabled={isDisabledRow(rowId)}\n                    />\n                </CheckBoxWrapper>\n            </BodyCell>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={\n                    emptyView?.title ? (\n                        typeof emptyView.title === \"string\" ? (\n                            <ErrorDisplayTitle weight=\"bold\">\n                                {emptyView.title}\n                            </ErrorDisplayTitle>\n                        ) : (\n                            emptyView.title\n                        )\n                    ) : (\n                        <ErrorDisplayTitle weight=\"bold\">\n                            {\"No <items> found\"}\n                        </ErrorDisplayTitle>\n                    )\n                }\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <BodyRow $alternating={false}>\n                <td colSpan={getTotalColumns()}>\n                    <LoaderWrapper\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </LoaderWrapper>\n                </td>\n            </BodyRow>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const counter = `item${count > 1 ? \"s\" : \"\"}`;\n\n        return (\n            <>\n                <ActionBarWrapper\n                    ref={actionBarWrapperRef}\n                    $strategy={actionBarStrategy}\n                    $left={\n                        isFloatingActionBar\n                            ? tableRef?.current?.getBoundingClientRect()?.left\n                            : 0\n                    }\n                    $width={tableRef?.current?.clientWidth}\n                >\n                    <ActionBar $float={isFloatingActionBar}>\n                        <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n                        <TextButton\n                            type=\"button\"\n                            aria-label={`Clear selection of ${count} ${counter}`}\n                            onClick={onClearSelectionClick}\n                        >\n                            Clear selection\n                        </TextButton>\n                        {actionBarContent}\n                    </ActionBar>\n                </ActionBarWrapper>\n                {/* leave a fixed space when action bar floats to avoid layout shift */}\n                {actionBarStrategy !== \"sticky\" && <ActionBarSpacer />}\n            </>\n        );\n    };\n\n    return (\n        <TableWrapper\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={className}\n            ref={wrapperRef}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n            $scrollable={scrollable}\n        >\n            <TableContainer>\n                <Table ref={tableRef}>\n                    {renderHeaders()}\n                    <TableBody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </TableBody>\n                </Table>\n            </TableContainer>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n        </TableWrapper>\n    );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","current","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","getBoundingClientRect","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","undefined","isSortable","headerCellWrapperId","getHeaderWrapperId","_jsxs","HeaderCell","$clickable","scope","$isCheckbox","onClick","handleHeaderClick","children","HeaderCellWrapper","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","ref","tabIndex","$scrollable","TableContainer","Table","TableHead","$stickyHeader","HeaderRow","TableBody","BodyRow","$alternating","EmptyViewCell","colSpan","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","counter","_Fragment","ActionBarWrapper","$strategy","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","$float","BodyMD","TextButton","ActionBarSpacer","renderSelectionBar"],"mappings":"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"}
+{"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport {\n    ActionBar,\n    ActionBarGap,\n    ActionBarSpacer,\n    ActionBarWrapper,\n    BodyCell,\n    BodyCellContent,\n    BodyRow,\n    CheckBoxWrapper,\n    EmptyViewCell,\n    ErrorDisplayTitle,\n    HeaderCell,\n    HeaderCellWrapper,\n    HeaderRow,\n    LoaderWrapper,\n    Table,\n    TableBody,\n    TableContainer,\n    TableHead,\n    TableWrapper,\n    TextButton,\n} from \"./data-table.styles\";\nimport { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n    id,\n    headers,\n    rows,\n    className,\n    sortIndicators,\n    alternatingRows,\n    loadState = \"success\",\n    enableMultiSelect,\n    selectedIds,\n    disabledIds,\n    enableActionBar,\n    enableActionBarWithoutSelection,\n    enableSelectAll,\n    enableStickyHeader,\n    emptyView,\n    actionBarContent,\n    renderCustomEmptyView,\n    onHeaderClick,\n    onSelect,\n    onSelectAll,\n    onClearSelectionClick,\n    ...otherProps\n}: DataTableProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const tableRef = useRef<HTMLTableElement>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const keyColumns = headers.filter(\n        (header): header is Exclude<HeaderProps, string> => {\n            return typeof header !== \"string\" && !!header.keyColumn;\n        }\n    );\n\n    const [actionBarStrategy, setActionBarStrategy] = useState<\n        \"sticky\" | \"fixed\" | \"inline\"\n    >(\"inline\");\n    const [scrollable, setScrollable] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const useUpdateActionBarBehaviour = useEvent(() => {\n        updateActionBarBehaviour();\n    });\n\n    useEffect(() => {\n        useUpdateActionBarBehaviour();\n    }, [useUpdateActionBarBehaviour]);\n\n    const updateActionBarBehaviourThrottled = useThrottle(\n        () => updateActionBarBehaviour(),\n        100\n    );\n\n    useResizeDetector({\n        targetRef: wrapperRef,\n        onResize: () => updateActionBarBehaviourThrottled(),\n    });\n\n    useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n    useEventListener(\n        \"scroll\",\n        updateActionBarBehaviourThrottled,\n        wrapperRef.current\n    );\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const getHeaderWrapperId = (fieldKey: string) => {\n        return `${internalId}-header-${fieldKey}`;\n    };\n    const getCellId = (rowId: string, fieldKey: string) => {\n        return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n    };\n\n    const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n        const keyColumnIds = keyColumns.map((header) =>\n            getCellId(rowId, header.fieldKey)\n        );\n\n        return concatIds(...keyColumnIds);\n    };\n\n    const updateActionBarBehaviour = () => {\n        if (\n            !wrapperRef.current ||\n            !headerRef.current ||\n            !actionBarWrapperRef.current\n        ) {\n            return;\n        }\n\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        const headerBounds = headerRef.current.getBoundingClientRect();\n\n        let strategy: typeof actionBarStrategy = \"inline\";\n\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n        if (\n            wrapperBounds.top > window.innerHeight ||\n            wrapperBounds.bottom < 0\n        ) {\n            // if fully out of the viewport, disable floating\n            strategy = \"inline\";\n        } else if (scrollable) {\n            if (\n                wrapperBounds.top > 0 &&\n                wrapperBounds.top < window.innerHeight &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if fully in the viewport, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.top < 0 &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if partially offscreen at the top, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.bottom > window.innerHeight &&\n                Math.max(wrapperBounds.top, headerBounds.bottom) +\n                    headerBounds.height <\n                    window.innerHeight\n            ) {\n                // if offscreen at the bottom, pin to the viewport, up until the table/header\n                strategy = \"fixed\";\n            }\n        } else if (\n            wrapperBounds.bottom > window.innerHeight &&\n            headerBounds.bottom + headerBounds.height < window.innerHeight\n        ) {\n            // if offscreen at the bottom, pin to the viewport, up until the header\n            strategy = \"fixed\";\n        }\n\n        setScrollable(scrollable);\n        setActionBarStrategy(strategy);\n\n        if (strategy === \"fixed\") {\n            setIsFloatingActionBar(true);\n        } else if (strategy === \"sticky\") {\n            const beforeScrollEnd =\n                wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n                wrapperRef.current.scrollHeight;\n            setIsFloatingActionBar(beforeScrollEnd);\n        } else {\n            setIsFloatingActionBar(false);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleHeaderClick = (fieldKey: string) => {\n        onHeaderClick?.(fieldKey);\n    };\n\n    const handleHeaderButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>,\n        fieldKey: string\n    ) => {\n        event.stopPropagation();\n        onHeaderClick?.(fieldKey);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <TableHead ref={headerRef} $stickyHeader={enableStickyHeader}>\n            <HeaderRow>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </HeaderRow>\n        </TableHead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        const isSortable = !!getSortDirection(fieldKey);\n        const headerCellWrapperId = getHeaderWrapperId(fieldKey);\n\n        return (\n            <HeaderCell\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                $clickable={clickable}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                $isCheckbox={false}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <HeaderCellWrapper id={headerCellWrapperId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </HeaderCellWrapper>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellWrapperId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </HeaderCell>\n        );\n    };\n\n    const renderSortedArrow = (fieldKey: string) => {\n        const isSorted = sortIndicators?.[fieldKey];\n\n        if (!isSorted) {\n            return <></>;\n        }\n        if (isSorted === \"asc\") {\n            return (\n                <ArrowUpIcon\n                    aria-hidden\n                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\n                aria-hidden\n                data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n            />\n        );\n    };\n\n    const renderHeaderCheckBox = () => {\n        return (\n            <HeaderCell\n                data-testid={getDataTestId(\"header-selection\")}\n                $clickable={false}\n                $isCheckbox={true}\n                scope=\"col\"\n            >\n                <CheckBoxWrapper>\n                    <VisuallyHidden>Row selection</VisuallyHidden>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </CheckBoxWrapper>\n            </HeaderCell>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <BodyRow $alternating={false}>\n                <EmptyViewCell colSpan={getTotalColumns()}>\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </EmptyViewCell>\n            </BodyRow>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <BodyRow\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        $showLastRowBottomBorder={isFloatingActionBar}\n                        $alternating={isAlternatingRow(index)}\n                        $isSelectable={enableMultiSelect}\n                        $isSelected={isRowSelected(row.id.toString())}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </BodyRow>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header !== \"string\" ? header.style : undefined;\n        const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n        const rowId = row.id.toString();\n        const cellData = row[fieldKey];\n        const cellId = `${rowId}-${fieldKey}`;\n\n        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                style={style}\n                $isCheckbox={false}\n            >\n                {typeof cellData === \"string\" ||\n                typeof cellData === \"number\" ? (\n                    <BodyCellContent>{cellData}</BodyCellContent>\n                ) : typeof cellData === \"function\" ? (\n                    cellData(row, { isSelected: isRowSelected(rowId) })\n                ) : (\n                    cellData\n                )}\n            </BodyCell>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                $isCheckbox={true}\n            >\n                <CheckBoxWrapper>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                        focusableWhenDisabled={isDisabledRow(rowId)}\n                    />\n                </CheckBoxWrapper>\n            </BodyCell>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={\n                    emptyView?.title ? (\n                        typeof emptyView.title === \"string\" ? (\n                            <ErrorDisplayTitle weight=\"bold\">\n                                {emptyView.title}\n                            </ErrorDisplayTitle>\n                        ) : (\n                            emptyView.title\n                        )\n                    ) : (\n                        <ErrorDisplayTitle weight=\"bold\">\n                            {\"No <items> found\"}\n                        </ErrorDisplayTitle>\n                    )\n                }\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <BodyRow $alternating={false}>\n                <td colSpan={getTotalColumns()}>\n                    <LoaderWrapper\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </LoaderWrapper>\n                </td>\n            </BodyRow>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const counter = `item${count === 1 ? \"\" : \"s\"}`;\n\n        return (\n            <>\n                <ActionBarWrapper\n                    ref={actionBarWrapperRef}\n                    $strategy={actionBarStrategy}\n                    $left={\n                        isFloatingActionBar\n                            ? tableRef?.current?.getBoundingClientRect()?.left\n                            : 0\n                    }\n                    $width={tableRef?.current?.clientWidth}\n                >\n                    <ActionBar $float={isFloatingActionBar}>\n                        <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n                        {count > 0 ? (\n                            <TextButton\n                                type=\"button\"\n                                aria-label={`Clear selection of ${count} ${counter}`}\n                                onClick={onClearSelectionClick}\n                            >\n                                Clear selection\n                            </TextButton>\n                        ) : (\n                            <ActionBarGap />\n                        )}\n                        {actionBarContent}\n                    </ActionBar>\n                </ActionBarWrapper>\n                {/* leave a fixed space when action bar floats to avoid layout shift */}\n                {actionBarStrategy !== \"sticky\" && <ActionBarSpacer />}\n            </>\n        );\n    };\n\n    return (\n        <TableWrapper\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={className}\n            ref={wrapperRef}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n            $scrollable={scrollable}\n        >\n            <TableContainer>\n                <Table ref={tableRef}>\n                    {renderHeaders()}\n                    <TableBody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </TableBody>\n                </Table>\n            </TableContainer>\n            {enableActionBar &&\n                ((selectedIds && selectedIds.length > 0) ||\n                    enableActionBarWithoutSelection) &&\n                renderSelectionBar()}\n        </TableWrapper>\n    );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","current","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","getBoundingClientRect","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","undefined","isSortable","headerCellWrapperId","getHeaderWrapperId","_jsxs","HeaderCell","$clickable","scope","$isCheckbox","onClick","handleHeaderClick","children","HeaderCellWrapper","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","ref","tabIndex","$scrollable","TableContainer","Table","TableHead","$stickyHeader","HeaderRow","TableBody","BodyRow","$alternating","EmptyViewCell","colSpan","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","counter","_Fragment","ActionBarWrapper","$strategy","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","BodyMD","TextButton","ActionBarGap","ActionBarSpacer","renderSelectionBar"],"mappings":"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"}

package/data-table/data-table.styles.d.ts

@@ -43,6 +43,7 @@ export declare const TextButton: import("styled-components/dist/types").IStyledC
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, never>>> & string;
 export declare const ActionBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$float"> & ActionBarProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$float"> & ActionBarProps, never>>> & string;
+export declare const ActionBarGap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ActionBarSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const HeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>> & string;
 export declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, keyof HeaderCellProps> & HeaderCellProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, keyof HeaderCellProps> & HeaderCellProps, never>>> & string;

package/data-table/data-table.styles.js

@@ -1,4 +1,4 @@
-import e,{css as t}from"styled-components";import{BasicButton as r}from"../shared/input-wrapper/input-wrapper.js";import{lineClampCss as o}from"../shared/styles/index.js";import{Colour as i,Border as d,Radius as s,Font as l,Motion as n,Spacing as a,Shadow as $}from"../theme/index.js";import{Typography as c}from"../typography/typography.js";const m=i.border,p=i.text,h=e.div`
+import e,{css as t}from"styled-components";import{BasicButton as r}from"../shared/input-wrapper/input-wrapper.js";import{lineClampCss as o}from"../shared/styles/index.js";import{Colour as i,Border as d,Radius as s,Font as l,Motion as n,Spacing as a,Shadow as $}from"../theme/index.js";import{Typography as m}from"../typography/typography.js";const c=i.border,p=i.text,h=e.div`
     /* we separate the overflow styles so that sticky elements can still work
        with horizontal scrolling on supported browsers
        see: https://github.com/w3c/csswg-drafts/issues/12289 */
@@ -7,7 +7,7 @@ import e,{css as t}from"styled-components";import{BasicButton as r}from"../share
     position: relative;
     display: flex;
     flex-direction: column;
-    border: ${d["width-010"]} ${d.solid} ${m};
+    border: ${d["width-010"]} ${d.solid} ${c};
     border-radius: ${s.md};
 
     /* Hide scrollbar */
@@ -70,7 +70,7 @@ import e,{css as t}from"styled-components";import{BasicButton as r}from"../share
     align-items: center;
     height: 3.5rem;
     padding: ${a["spacing-16"]} ${a["spacing-24"]};
-    border-top: ${d["width-010"]} ${d.solid} ${m};
+    border-top: ${d["width-010"]} ${d.solid} ${c};
     background-color: ${i["bg-selected"]};
     transition: transform ${n["duration-350"]} ${n["ease-default"]};
     ${e=>e.$float?t`
@@ -78,24 +78,26 @@ import e,{css as t}from"styled-components";import{BasicButton as r}from"../share
                 border-radius: ${s.sm};
                 box-shadow: ${$["xs-subtle"]};
                 width: calc(100% - ${a["spacing-16"]});
-                border: ${d["width-010"]} ${d.solid} ${m};
+                border: ${d["width-010"]} ${d.solid} ${c};
             `:t`
                 border-radius: ${s.none} ${s.none}
                     ${s.sm} ${s.sm};
             `}
 `,v=e.div`
+    width: 0.75rem;
+`,k=e.div`
     height: 3.5rem;
-`,k=e.tr`
+`,j=e.tr`
     background-color: ${i["bg-stronger"]};
     height: 6rem;
-    border-bottom: ${d["width-010"]} ${d.solid} ${m};
-`,j=e.th`
+    border-bottom: ${d["width-010"]} ${d.solid} ${c};
+`,B=e.th`
     padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
     text-align: left;
     cursor: ${e=>e.$clickable?"pointer":"default"};
     vertical-align: middle;
     color: ${p};
-    border-bottom: ${d["width-010"]} ${d.solid} ${m};
+    border-bottom: ${d["width-010"]} ${d.solid} ${c};
     ${e=>{if(e.$isCheckbox)return t`
                 width: 4rem;
             `}};
@@ -103,7 +105,7 @@ import e,{css as t}from"styled-components";import{BasicButton as r}from"../share
         outline: 2px solid ${i["focus-ring"]};
         outline-offset: -3px;
     }
-`,B=e.div`
+`,C=e.div`
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -112,7 +114,7 @@ import e,{css as t}from"styled-components";import{BasicButton as r}from"../share
         color: ${p};
         margin-left: 0.5rem;
     }
-`,C=e.tr`
+`,S=e.tr`
     background-color: ${e=>e.$isSelected?t`
                 ${i["bg-selected"]};
             `:e.$alternating?t`
@@ -120,7 +122,7 @@ import e,{css as t}from"styled-components";import{BasicButton as r}from"../share
             `:t`
                 ${i.bg};
             `};
-    border-top: ${d["width-010"]} ${d.solid} ${m};
+    border-top: ${d["width-010"]} ${d.solid} ${c};
     &:hover {
         ${e=>{if(e.$isSelectable)return t`
                     background-color: ${i["bg-hover-strong"]};
@@ -129,30 +131,30 @@ import e,{css as t}from"styled-components";import{BasicButton as r}from"../share
 
     &:last-child {
         td {
-            border-bottom: ${e=>e.$showLastRowBottomBorder?`${d["width-010"]} ${d.solid} ${m}`:"none"};
+            border-bottom: ${e=>e.$showLastRowBottomBorder?`${d["width-010"]} ${d.solid} ${c}`:"none"};
         }
     }
-`,S=e.td`
+`,H=e.td`
     padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
     vertical-align: middle;
     color: ${p};
-    border-bottom: ${d["width-010"]} ${d.solid} ${m};
-`,H=e(c.BodyBL)`
+    border-bottom: ${d["width-010"]} ${d.solid} ${c};
+`,z=e(m.BodyBL)`
     ${o(2)}
     text-overflow: ellipsis;
-`,z=e.div`
+`,L=e.div`
     display: flex;
     align-items: center;
     justify-content: center;
-`,L=e.div`
+`,E=e.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 4rem 0;
-`,E=e(c.HeadingSM)`
+`,F=e(m.HeadingSM)`
     margin-top: 2rem;
     margin-bottom: 1rem;
-`,F=e.td`
+`,I=e.td`
     padding: 4rem 0;
-`;export{y as ActionBar,v as ActionBarSpacer,u as ActionBarWrapper,S as BodyCell,H as BodyCellContent,C as BodyRow,z as CheckBoxWrapper,F as EmptyViewCell,E as ErrorDisplayTitle,j as HeaderCell,B as HeaderCellWrapper,k as HeaderRow,L as LoaderWrapper,g as Table,w as TableBody,b as TableContainer,f as TableHead,h as TableWrapper,x as TextButton};
+`;export{y as ActionBar,v as ActionBarGap,k as ActionBarSpacer,u as ActionBarWrapper,H as BodyCell,z as BodyCellContent,S as BodyRow,L as CheckBoxWrapper,I as EmptyViewCell,F as ErrorDisplayTitle,B as HeaderCell,C as HeaderCellWrapper,j as HeaderRow,E as LoaderWrapper,g as Table,w as TableBody,b as TableContainer,f as TableHead,h as TableWrapper,x as TextButton};
 //# sourceMappingURL=data-table.styles.js.map

package/data-table/data-table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.styles.js","sources":["../../src/data-table/data-table.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface TableWrapperProps {\n    $scrollable: boolean;\n}\ninterface TableHeadProps {\n    $stickyHeader: boolean | undefined;\n}\ninterface HeaderCellProps {\n    $clickable: boolean;\n    $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n    $alternating: boolean;\n    $isSelected?: boolean;\n    $isSelectable?: boolean;\n    $showLastRowBottomBorder?: boolean;\n}\n\ninterface BodyCellProps {\n    $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n    $strategy: \"fixed\" | \"sticky\" | \"inline\";\n    $left?: number | undefined;\n    $width?: number | undefined;\n}\n\ninterface ActionBarProps {\n    $float: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div<TableWrapperProps>`\n    /* we separate the overflow styles so that sticky elements can still work\n       with horizontal scrolling on supported browsers\n       see: https://github.com/w3c/csswg-drafts/issues/12289 */\n    overflow-y: ${(props) => (props.$scrollable ? \"auto\" : \"clip\")};\n    overflow-x: auto;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const TableContainer = styled.div`\n    flex: 1;\n`;\n\nexport const Table = styled.table`\n    th:last-child,\n    td:last-child {\n        padding-right: 1.5rem;\n    }\n    th:first-child,\n    td:first-child {\n        padding-left: 1.5rem;\n    }\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const TableHead = styled.thead<TableHeadProps>`\n    ${(props) => {\n        if (props.$stickyHeader) {\n            return css`\n                position: sticky;\n                top: 0;\n                z-index: 20;\n            `;\n        }\n    }};\n`;\n\nexport const TableBody = styled.tbody``;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n    ${(props) => {\n        const left = props.$left ? `${props.$left}px` : \"0\";\n        const width = props.$width ? `${props.$width}px` : \"100%\";\n\n        switch (props.$strategy) {\n            case \"inline\":\n                return css`\n                    position: absolute;\n                    bottom: 0;\n                    left: 0;\n                    width: ${width};\n                `;\n            case \"fixed\":\n                return css`\n                    position: fixed;\n                    bottom: 0;\n                    left: ${left};\n                    width: ${width};\n                `;\n            case \"sticky\":\n                return css`\n                    position: sticky;\n                    bottom: 0;\n                    width: ${width};\n                `;\n        }\n    }}\n`;\n\nexport const TextButton = styled(BasicButton)`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const ActionBar = styled.div<ActionBarProps>`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n    ${(props) => {\n        if (props.$float) {\n            return css`\n                transform: translateX(0.5rem) translateY(-2rem);\n                border-radius: ${Radius[\"sm\"]};\n                box-shadow: ${Shadow[\"xs-subtle\"]};\n                width: calc(100% - ${Spacing[\"spacing-16\"]});\n                border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n            `;\n        } else {\n            return css`\n                border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]}\n                    ${Radius[\"sm\"]} ${Radius[\"sm\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ActionBarSpacer = styled.div`\n    height: 3.5rem;\n`;\n\nexport const HeaderRow = styled.tr`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const HeaderCell = styled.th<HeaderCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    text-align: left;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    ${(props) => {\n        if (props.$isCheckbox) {\n            return css`\n                width: 4rem;\n            `;\n        }\n    }};\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const HeaderCellWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${fontColor};\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const BodyRow = styled.tr<BodyRowProps>`\n    background-color: ${(props) => {\n        if (props.$isSelected) {\n            return css`\n                ${Colour[\"bg-selected\"]};\n            `;\n        } else if (props.$alternating) {\n            return css`\n                ${Colour[\"bg-strong\"]};\n            `;\n        } else {\n            return css`\n                ${Colour[\"bg\"]};\n            `;\n        }\n    }};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    &:hover {\n        ${(props) => {\n            if (props.$isSelectable) {\n                return css`\n                    background-color: ${Colour[\"bg-hover-strong\"]};\n                `;\n            }\n        }};\n    }\n\n    &:last-child {\n        td {\n            border-bottom: ${(props) =>\n                props.$showLastRowBottomBorder\n                    ? `${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor}`\n                    : \"none\"};\n        }\n    }\n`;\n\nexport const BodyCell = styled.td<BodyCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCellContent = styled(Typography.BodyBL)`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const CheckBoxWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const LoaderWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const ErrorDisplayTitle = styled(Typography.HeadingSM)`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n\nexport const EmptyViewCell = styled.td`\n    padding: 4rem 0;\n`;\n"],"names":["borderColor","Colour","fontColor","TableWrapper","styled","div","props","$scrollable","Border","Radius","TableContainer","Table","table","TableHead","thead","$stickyHeader","css","TableBody","tbody","ActionBarWrapper","left","$left","width","$width","$strategy","TextButton","BasicButton","Font","Motion","ActionBar","Spacing","$float","Shadow","ActionBarSpacer","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","$showLastRowBottomBorder","BodyCell","td","BodyCellContent","Typography","BodyBL","lineClampCss","CheckBoxWrapper","LoaderWrapper","ErrorDisplayTitle","HeadingSM","EmptyViewCell"],"mappings":"sVAoDA,MAAMA,EAAcC,EAAe,OAC7BC,EAAYD,EAAa,KAKlBE,EAAeC,EAAOC,GAAsB;;;;kBAItCC,GAAWA,EAAMC,YAAc,OAAS;;;;;cAK7CC,EAAO,gBAAgBA,EAAc,SAAKR;qBACnCS,EAAW;;;;;;;;EAUnBC,EAAiBN,EAAOC,GAAG;;EAI3BM,EAAQP,EAAOQ,KAAK;;;;;;;;;;;;;EAepBC,EAAYT,EAAOU,KAAqB;MAC9CR,IACC,GAAIA,EAAMS,cACN,OAAOC,CAAG;;;;aAKd;EAIKC,EAAYb,EAAOc,KAAK,GAExBC,EAAmBf,EAAOC,GAA0B;MAC1DC,IACC,MAAMc,EAAOd,EAAMe,MAAQ,GAAGf,EAAMe,UAAY,IAC1CC,EAAQhB,EAAMiB,OAAS,GAAGjB,EAAMiB,WAAa,OAEnD,OAAQjB,EAAMkB,WACV,IAAK,SACD,OAAOR,CAAG;;;;6BAIGM;kBAEjB,IAAK,QACD,OAAON,CAAG;;;4BAGEI;6BACCE;kBAEjB,IAAK,SACD,OAAON,CAAG;;;6BAGGM;;EAMhBG,EAAarB,EAAOsB,EAAY;MACvCC,EAAK;;aAEE1B,EAAO;kBACF2B,EAAO,mBAAmBA,EAAO;;;;;iBAKlC3B,EAAO;;EAIX4B,EAAYzB,EAAOC,GAAmB;;;;;eAKpCyB,EAAQ,iBAAiBA,EAAQ;kBAC9BtB,EAAO,gBAAgBA,EAAc,SAAKR;wBACpCC,EAAO;4BACH2B,EAAO,mBAAmBA,EAAO;MACtDtB,GACKA,EAAMyB,OACCf,CAAG;;iCAEWP,EAAW;8BACduB,EAAO;qCACAF,EAAQ;0BACnBtB,EAAO,gBAAgBA,EAAc,SAAKR;cAGjDgB,CAAG;iCACWP,EAAa,QAAKA,EAAa;sBAC1CA,EAAW,MAAKA,EAAW;;EAMpCwB,EAAkB7B,EAAOC,GAAG;;EAI5B6B,EAAY9B,EAAO+B,EAAE;wBACVlC,EAAO;;qBAEVO,EAAO,gBAAgBA,EAAc,SAAKR;EAGlDoC,EAAahC,EAAOiC,EAAmB;eACpC/B,GACRA,EAAMgC,YAAc,gCAAkC;;cAE/ChC,GAAWA,EAAMiC,WAAa,UAAY;;aAE5CrC;qBACQM,EAAO,gBAAgBA,EAAc,SAAKR;MACxDM,IACC,GAAIA,EAAMgC,YACN,OAAOtB,CAAG;;aAGd;;6BAGqBf,EAAO;;;EAKvBuC,EAAoBpC,EAAOC,GAAG;;;;;;iBAM1BH;;;EAKJuC,EAAUrC,EAAO+B,EAAgB;wBACrB7B,GACbA,EAAMoC,YACC1B,CAAG;kBACJf,EAAO;cAENK,EAAMqC,aACN3B,CAAG;kBACJf,EAAO;cAGNe,CAAG;kBACJf,EAAW;;kBAIXO,EAAO,gBAAgBA,EAAc,SAAKR;;UAEjDM,IACC,GAAIA,EAAMsC,cACN,OAAO5B,CAAG;wCACcf,EAAO;iBAEnC;;;;;6BAMkBK,GACdA,EAAMuC,yBACA,GAAGrC,EAAO,gBAAgBA,EAAc,SAAKR,IAC7C;;;EAKT8C,EAAW1C,EAAO2C,EAAiB;eAChCzC,GACRA,EAAMgC,YAAc,gCAAkC;;aAEjDpC;qBACQM,EAAO,gBAAgBA,EAAc,SAAKR;EAGlDgD,EAAkB5C,EAAO6C,EAAWC,OAAO;MAClDC,EAAa;;EAINC,EAAkBhD,EAAOC,GAAG;;;;EAM5BgD,EAAgBjD,EAAOC,GAAG;;;;;EAO1BiD,EAAoBlD,EAAO6C,EAAWM,UAAU;;;EAKhDC,EAAgBpD,EAAO2C,EAAE;;"}
+{"version":3,"file":"data-table.styles.js","sources":["../../src/data-table/data-table.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface TableWrapperProps {\n    $scrollable: boolean;\n}\ninterface TableHeadProps {\n    $stickyHeader: boolean | undefined;\n}\ninterface HeaderCellProps {\n    $clickable: boolean;\n    $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n    $alternating: boolean;\n    $isSelected?: boolean;\n    $isSelectable?: boolean;\n    $showLastRowBottomBorder?: boolean;\n}\n\ninterface BodyCellProps {\n    $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n    $strategy: \"fixed\" | \"sticky\" | \"inline\";\n    $left?: number | undefined;\n    $width?: number | undefined;\n}\n\ninterface ActionBarProps {\n    $float: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div<TableWrapperProps>`\n    /* we separate the overflow styles so that sticky elements can still work\n       with horizontal scrolling on supported browsers\n       see: https://github.com/w3c/csswg-drafts/issues/12289 */\n    overflow-y: ${(props) => (props.$scrollable ? \"auto\" : \"clip\")};\n    overflow-x: auto;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const TableContainer = styled.div`\n    flex: 1;\n`;\n\nexport const Table = styled.table`\n    th:last-child,\n    td:last-child {\n        padding-right: 1.5rem;\n    }\n    th:first-child,\n    td:first-child {\n        padding-left: 1.5rem;\n    }\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const TableHead = styled.thead<TableHeadProps>`\n    ${(props) => {\n        if (props.$stickyHeader) {\n            return css`\n                position: sticky;\n                top: 0;\n                z-index: 20;\n            `;\n        }\n    }};\n`;\n\nexport const TableBody = styled.tbody``;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n    ${(props) => {\n        const left = props.$left ? `${props.$left}px` : \"0\";\n        const width = props.$width ? `${props.$width}px` : \"100%\";\n\n        switch (props.$strategy) {\n            case \"inline\":\n                return css`\n                    position: absolute;\n                    bottom: 0;\n                    left: 0;\n                    width: ${width};\n                `;\n            case \"fixed\":\n                return css`\n                    position: fixed;\n                    bottom: 0;\n                    left: ${left};\n                    width: ${width};\n                `;\n            case \"sticky\":\n                return css`\n                    position: sticky;\n                    bottom: 0;\n                    width: ${width};\n                `;\n        }\n    }}\n`;\n\nexport const TextButton = styled(BasicButton)`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const ActionBar = styled.div<ActionBarProps>`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n    ${(props) => {\n        if (props.$float) {\n            return css`\n                transform: translateX(0.5rem) translateY(-2rem);\n                border-radius: ${Radius[\"sm\"]};\n                box-shadow: ${Shadow[\"xs-subtle\"]};\n                width: calc(100% - ${Spacing[\"spacing-16\"]});\n                border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n            `;\n        } else {\n            return css`\n                border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]}\n                    ${Radius[\"sm\"]} ${Radius[\"sm\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ActionBarGap = styled.div`\n    width: 0.75rem;\n`;\n\nexport const ActionBarSpacer = styled.div`\n    height: 3.5rem;\n`;\n\nexport const HeaderRow = styled.tr`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const HeaderCell = styled.th<HeaderCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    text-align: left;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    ${(props) => {\n        if (props.$isCheckbox) {\n            return css`\n                width: 4rem;\n            `;\n        }\n    }};\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const HeaderCellWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${fontColor};\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const BodyRow = styled.tr<BodyRowProps>`\n    background-color: ${(props) => {\n        if (props.$isSelected) {\n            return css`\n                ${Colour[\"bg-selected\"]};\n            `;\n        } else if (props.$alternating) {\n            return css`\n                ${Colour[\"bg-strong\"]};\n            `;\n        } else {\n            return css`\n                ${Colour[\"bg\"]};\n            `;\n        }\n    }};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    &:hover {\n        ${(props) => {\n            if (props.$isSelectable) {\n                return css`\n                    background-color: ${Colour[\"bg-hover-strong\"]};\n                `;\n            }\n        }};\n    }\n\n    &:last-child {\n        td {\n            border-bottom: ${(props) =>\n                props.$showLastRowBottomBorder\n                    ? `${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor}`\n                    : \"none\"};\n        }\n    }\n`;\n\nexport const BodyCell = styled.td<BodyCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCellContent = styled(Typography.BodyBL)`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const CheckBoxWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const LoaderWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const ErrorDisplayTitle = styled(Typography.HeadingSM)`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n\nexport const EmptyViewCell = styled.td`\n    padding: 4rem 0;\n`;\n"],"names":["borderColor","Colour","fontColor","TableWrapper","styled","div","props","$scrollable","Border","Radius","TableContainer","Table","table","TableHead","thead","$stickyHeader","css","TableBody","tbody","ActionBarWrapper","left","$left","width","$width","$strategy","TextButton","BasicButton","Font","Motion","ActionBar","Spacing","$float","Shadow","ActionBarGap","ActionBarSpacer","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","$showLastRowBottomBorder","BodyCell","td","BodyCellContent","Typography","BodyBL","lineClampCss","CheckBoxWrapper","LoaderWrapper","ErrorDisplayTitle","HeadingSM","EmptyViewCell"],"mappings":"sVAoDA,MAAMA,EAAcC,EAAe,OAC7BC,EAAYD,EAAa,KAKlBE,EAAeC,EAAOC,GAAsB;;;;kBAItCC,GAAWA,EAAMC,YAAc,OAAS;;;;;cAK7CC,EAAO,gBAAgBA,EAAc,SAAKR;qBACnCS,EAAW;;;;;;;;EAUnBC,EAAiBN,EAAOC,GAAG;;EAI3BM,EAAQP,EAAOQ,KAAK;;;;;;;;;;;;;EAepBC,EAAYT,EAAOU,KAAqB;MAC9CR,IACC,GAAIA,EAAMS,cACN,OAAOC,CAAG;;;;aAKd;EAIKC,EAAYb,EAAOc,KAAK,GAExBC,EAAmBf,EAAOC,GAA0B;MAC1DC,IACC,MAAMc,EAAOd,EAAMe,MAAQ,GAAGf,EAAMe,UAAY,IAC1CC,EAAQhB,EAAMiB,OAAS,GAAGjB,EAAMiB,WAAa,OAEnD,OAAQjB,EAAMkB,WACV,IAAK,SACD,OAAOR,CAAG;;;;6BAIGM;kBAEjB,IAAK,QACD,OAAON,CAAG;;;4BAGEI;6BACCE;kBAEjB,IAAK,SACD,OAAON,CAAG;;;6BAGGM;;EAMhBG,EAAarB,EAAOsB,EAAY;MACvCC,EAAK;;aAEE1B,EAAO;kBACF2B,EAAO,mBAAmBA,EAAO;;;;;iBAKlC3B,EAAO;;EAIX4B,EAAYzB,EAAOC,GAAmB;;;;;eAKpCyB,EAAQ,iBAAiBA,EAAQ;kBAC9BtB,EAAO,gBAAgBA,EAAc,SAAKR;wBACpCC,EAAO;4BACH2B,EAAO,mBAAmBA,EAAO;MACtDtB,GACKA,EAAMyB,OACCf,CAAG;;iCAEWP,EAAW;8BACduB,EAAO;qCACAF,EAAQ;0BACnBtB,EAAO,gBAAgBA,EAAc,SAAKR;cAGjDgB,CAAG;iCACWP,EAAa,QAAKA,EAAa;sBAC1CA,EAAW,MAAKA,EAAW;;EAMpCwB,EAAe7B,EAAOC,GAAG;;EAIzB6B,EAAkB9B,EAAOC,GAAG;;EAI5B8B,EAAY/B,EAAOgC,EAAE;wBACVnC,EAAO;;qBAEVO,EAAO,gBAAgBA,EAAc,SAAKR;EAGlDqC,EAAajC,EAAOkC,EAAmB;eACpChC,GACRA,EAAMiC,YAAc,gCAAkC;;cAE/CjC,GAAWA,EAAMkC,WAAa,UAAY;;aAE5CtC;qBACQM,EAAO,gBAAgBA,EAAc,SAAKR;MACxDM,IACC,GAAIA,EAAMiC,YACN,OAAOvB,CAAG;;aAGd;;6BAGqBf,EAAO;;;EAKvBwC,EAAoBrC,EAAOC,GAAG;;;;;;iBAM1BH;;;EAKJwC,EAAUtC,EAAOgC,EAAgB;wBACrB9B,GACbA,EAAMqC,YACC3B,CAAG;kBACJf,EAAO;cAENK,EAAMsC,aACN5B,CAAG;kBACJf,EAAO;cAGNe,CAAG;kBACJf,EAAW;;kBAIXO,EAAO,gBAAgBA,EAAc,SAAKR;;UAEjDM,IACC,GAAIA,EAAMuC,cACN,OAAO7B,CAAG;wCACcf,EAAO;iBAEnC;;;;;6BAMkBK,GACdA,EAAMwC,yBACA,GAAGtC,EAAO,gBAAgBA,EAAc,SAAKR,IAC7C;;;EAKT+C,EAAW3C,EAAO4C,EAAiB;eAChC1C,GACRA,EAAMiC,YAAc,gCAAkC;;aAEjDrC;qBACQM,EAAO,gBAAgBA,EAAc,SAAKR;EAGlDiD,EAAkB7C,EAAO8C,EAAWC,OAAO;MAClDC,EAAa;;EAINC,EAAkBjD,EAAOC,GAAG;;;;EAM5BiD,EAAgBlD,EAAOC,GAAG;;;;;EAO1BkD,EAAoBnD,EAAO8C,EAAWM,UAAU;;;EAKhDC,EAAgBrD,EAAO4C,EAAE;;"}

package/data-table/types.d.ts

@@ -7,6 +7,13 @@ export interface DataTableProps {
     headers: HeaderProps[];
     rows?: RowProps[] | undefined;
     className?: string | undefined;
+    /**
+     * The ids of selected items. If undefined, the Select All checkbox remains
+     * enabled when rows are non-empty.
+     * @remarks Must be provided alongside `enableMultiSelect` for selection to work. Pass an
+     * empty array (not `undefined`) to enable the select-all checkbox while having no rows
+     * selected.
+     */
     selectedIds?: string[] | undefined;
     disabledIds?: string[] | undefined;
     /** Enables a checkbox for each row */
@@ -15,6 +22,8 @@ export interface DataTableProps {
     enableSelectAll?: boolean | undefined;
     /** Specifies if an action bar is visible when one or more rows are selected */
     enableActionBar?: boolean | undefined;
+    /** Shows the action bar even when no rows are selected. Requires `enableActionBar`. */
+    enableActionBarWithoutSelection?: boolean | undefined;
     /** Specifies if the header is fixed to the top */
     enableStickyHeader?: boolean | undefined;
     /** Custom content to be rendered within the action bar */

package/error-display/error-display-data.js

@@ -1,2 +1,2 @@
-import{renderDescriptionWithProps as s}from"./error-display-helper-comp.js";import{ErrorDisplayHelper as e}from"./helper.js";const{imgAttributeHelper:t}=e,g={400:{base:"https://assets.life.gov.sg/react-design-system/img/error/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/400@3x.png",width:400,height:280},403:{base:"https://assets.life.gov.sg/react-design-system/img/error/403.png",md:"https://assets.life.gov.sg/react-design-system/img/error/403@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/403@3x.png",width:400,height:280},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/404.png",md:"https://assets.life.gov.sg/react-design-system/img/error/404@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/404@3x.png",width:400,height:280},408:{base:"https://assets.life.gov.sg/react-design-system/img/error/408.png",md:"https://assets.life.gov.sg/react-design-system/img/error/408@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/408@3x.png",width:400,height:280},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png",width:400,height:280},502:{base:"https://assets.life.gov.sg/react-design-system/img/error/502.png",md:"https://assets.life.gov.sg/react-design-system/img/error/502@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/502@3x.png",width:400,height:280},503:{base:"https://assets.life.gov.sg/react-design-system/img/error/503.png",md:"https://assets.life.gov.sg/react-design-system/img/error/503@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/503@3x.png",width:400,height:280},504:{base:"https://assets.life.gov.sg/react-design-system/img/error/504.png",md:"https://assets.life.gov.sg/react-design-system/img/error/504@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/504@3x.png",width:400,height:280},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/confirmation@3x.png",width:400,height:280},"insufficient-credits":{base:"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit.png",md:"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@3x.png",width:400,height:280},inactivity:{base:"https://assets.life.gov.sg/react-design-system/img/error/inactivity.png",md:"https://assets.life.gov.sg/react-design-system/img/error/inactivity@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/inactivity@3x.png",width:400,height:280},"link-error":{base:"https://assets.life.gov.sg/react-design-system/img/error/link-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/link-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/link-error@3x.png",width:400,height:280},logout:{base:"https://assets.life.gov.sg/react-design-system/img/error/logout.png",md:"https://assets.life.gov.sg/react-design-system/img/error/logout@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/logout@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@3x.png",width:400,height:280},"payment-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@3x.png",width:400,height:281},"transfer-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@3x.png",width:400,height:280},"unsupported-browser":{base:"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png",width:400,height:280},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/warning@3x.png",width:400,height:280}},r={400:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@3x.png",width:400,height:215},403:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/403.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@3x.png",width:400,height:254},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/404.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@3x.png",width:400,height:319},408:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/408.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@3x.png",width:400,height:330},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png",width:400,height:232},502:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/502.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@3x.png",width:400,height:215},503:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/503.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@3x.png",width:400,height:191},504:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/504.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@3x.png",width:400,height:261},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@3x.png",width:400,height:280},"insufficient-credits":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@3x.png",width:400,height:280},inactivity:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@3x.png",width:400,height:276},"link-error":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@3x.png",width:400,height:280},logout:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@3x.png",width:400,height:290},"payment-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@3x.png",width:400,height:280},"transfer-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@3x.png",width:400,height:280},"unsupported-browser":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png",width:400,height:232},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@3x.png",width:400,height:280}},i=Object.assign(Object.assign({},g),{400:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@3x.png",width:400,height:280},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png",width:400,height:280},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png",width:400,height:280},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png",width:400,height:280},"unsupported-browser":{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png",width:400,height:280},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@3x.png",width:400,height:280}}),n=Object.assign(Object.assign({},g),{400:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@3x.png",width:400,height:280},403:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@3x.png",width:400,height:280},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@3x.png",width:400,height:280},408:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@3x.png",width:400,height:280},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@3x.png",width:400,height:280},502:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@3x.png",width:400,height:280},503:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@3x.png",width:400,height:280},504:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@3x.png",width:400,height:280},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@3x.png",width:400,height:280},inactivity:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@3x.png",width:400,height:280},"link-error":{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@3x.png",width:400,height:280},logout:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@3x.png",width:400,height:280},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@3x.png",width:400,height:280},"payment-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@3x.png",width:400,height:280}}),o=(e,g)=>new Map([["400",{img:t(e[400],g),title:"Something went wrong",description:"This could be a temporary problem, so please refresh the page or try again later."}],["403",{img:t(e[403],g),title:"Error loading page",description:"You may not have permission to view this page. If someone gave you this link, let them know about this error."}],["404",{img:t(e[404],g),title:"Page not found",description:"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know about this error."}],["408",{img:t(e[408],g),title:"Something went wrong",description:"This could be a temporary problem, so please refresh the page or try again later."}],["500",{img:t(e[500],g),title:"Something went wrong",description:"We're working on a fix for the problem. Please try again later."}],["502",{img:t(e[502],g),title:"Something went wrong",description:"This could be a temporary problem, so please refresh the page or try again later."}],["503",{img:t(e[503],g),title:"Service under maintenance",description:"This service is currently unavailable. Please try again later."}],["504",{img:t(e[504],g),title:"Something went wrong",description:"This could be a temporary problem, so please refresh the page or try again later."}],["confirmation",{img:t(e.confirmation,g),title:"Leave and lose changes?",description:"You have unsaved changes. If you leave this page, you will lose the changes you’ve made."}],["link-error",{img:t(e["link-error"],g),title:"Link has expired",description:"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know it has expired."}],["logout",{img:t(e.logout,g),title:"You’ve been logged out",description:"It looks like you’ve left, so we logged you out to protect your privacy."}],["insufficient-credits",{img:t(e["insufficient-credits"],g),title:"Insufficient credits",description:"You do not have enough credits to make this transaction."}],["inactivity",{img:t(e.inactivity,g),title:"Are you still there?",description:"You’ve been inactive for a while. To protect your privacy, you’ll be logged out soon.\n\nIf you wish to stay on this page, let us know now.",renderDescription:s("inactivity")}],["maintenance",{img:t(e[503],g),title:"Service under maintenance",description:"This service is currently unavailable. Please try again later.",renderDescription:s("maintenance")}],["no-item-found",{img:t(e["no-item-found"],g),title:"No results found",description:"Try adjusting your search or filters to find what you’re looking for."}],["payment-unsuccessful",{img:t(e["payment-unsuccessful"],g),title:"Unsuccessful payment",description:"Your payment was unsuccessful. Please try again."}],["transfer-unsuccessful",{img:t(e["transfer-unsuccessful"],g),title:"Unsuccessful transfer",description:"Your transfer was unsuccessful. Please try again."}],["unsupported-browser",{img:t(e["unsupported-browser"],g),title:"Browser not supported",description:"Download the latest version of Chrome, Edge, Firefox or Safari."}],["partially-supported-browser",{img:t(e["unsupported-browser"],g),title:"Browser version not supported",description:"Update to the latest version of Chrome, Edge, Firefox or Safari."}],["warning",{img:t(e.warning,g),title:"Are you sure?",description:"You will lose your progress."}]]),a=(s,e,t)=>{switch(e){case"bookingsg":return o(r,t).get(s);case"ccube":return o(i,t).get(s);case"mylegacy":case"smgs":return o(n,t).get(s);default:return o(g,t).get(s)}};export{o as generateErrorDisplayData,a as getErrorDisplayData};
+import{renderDescriptionWithProps as s}from"./error-display-helper-comp.js";import{ErrorDisplayHelper as e}from"./helper.js";const{imgAttributeHelper:t}=e,g={400:{base:"https://assets.life.gov.sg/react-design-system/img/error/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/400@3x.png",width:400,height:280},403:{base:"https://assets.life.gov.sg/react-design-system/img/error/403.png",md:"https://assets.life.gov.sg/react-design-system/img/error/403@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/403@3x.png",width:400,height:280},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/404.png",md:"https://assets.life.gov.sg/react-design-system/img/error/404@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/404@3x.png",width:400,height:280},408:{base:"https://assets.life.gov.sg/react-design-system/img/error/408.png",md:"https://assets.life.gov.sg/react-design-system/img/error/408@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/408@3x.png",width:400,height:280},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png",width:400,height:280},502:{base:"https://assets.life.gov.sg/react-design-system/img/error/502.png",md:"https://assets.life.gov.sg/react-design-system/img/error/502@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/502@3x.png",width:400,height:280},503:{base:"https://assets.life.gov.sg/react-design-system/img/error/503.png",md:"https://assets.life.gov.sg/react-design-system/img/error/503@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/503@3x.png",width:400,height:280},504:{base:"https://assets.life.gov.sg/react-design-system/img/error/504.png",md:"https://assets.life.gov.sg/react-design-system/img/error/504@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/504@3x.png",width:400,height:280},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/confirmation@3x.png",width:400,height:280},"insufficient-credits":{base:"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit.png",md:"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@3x.png",width:400,height:280},inactivity:{base:"https://assets.life.gov.sg/react-design-system/img/error/inactivity.png",md:"https://assets.life.gov.sg/react-design-system/img/error/inactivity@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/inactivity@3x.png",width:400,height:280},"link-error":{base:"https://assets.life.gov.sg/react-design-system/img/error/link-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/link-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/link-error@3x.png",width:400,height:280},logout:{base:"https://assets.life.gov.sg/react-design-system/img/error/logout.png",md:"https://assets.life.gov.sg/react-design-system/img/error/logout@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/logout@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@3x.png",width:400,height:280},"payment-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@3x.png",width:400,height:281},"transfer-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@3x.png",width:400,height:280},"unsupported-browser":{base:"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png",width:400,height:280},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/warning@3x.png",width:400,height:280}},r={400:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@3x.png",width:400,height:215},403:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/403.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@3x.png",width:400,height:254},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/404.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@3x.png",width:400,height:319},408:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/408.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@3x.png",width:400,height:330},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png",width:400,height:232},502:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/502.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@3x.png",width:400,height:215},503:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/503.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@3x.png",width:400,height:191},504:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/504.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@3x.png",width:400,height:261},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@3x.png",width:400,height:280},"insufficient-credits":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@3x.png",width:400,height:280},inactivity:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@3x.png",width:400,height:276},"link-error":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@3x.png",width:400,height:280},logout:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@3x.png",width:400,height:290},"payment-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@3x.png",width:400,height:280},"transfer-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@3x.png",width:400,height:280},"unsupported-browser":{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png",width:400,height:232},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@3x.png",width:400,height:280}},i=Object.assign(Object.assign({},g),{400:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400@3x.png",width:400,height:280},403:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403@3x.png",width:400,height:284},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404@3x.png",width:400,height:280},408:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408@3x.png",width:400,height:280},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@3x.png",width:400,height:280},502:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502@3x.png",width:400,height:280},503:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503@3x.png",width:400,height:220},504:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504@3x.png",width:400,height:220},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation@3x.png",width:400,height:280},inactivity:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity@3x.png",width:400,height:280},"link-error":{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error@3x.png",width:400,height:280},logout:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found@3x.png",width:400,height:280},"unsupported-browser":{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@3x.png",width:400,height:280},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning@3x.png",width:400,height:280}}),a=Object.assign(Object.assign({},g),{400:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@3x.png",width:400,height:280},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png",width:400,height:280},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png",width:400,height:280},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png",width:400,height:280},"unsupported-browser":{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png",width:400,height:280},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@3x.png",width:400,height:280}}),n=Object.assign(Object.assign({},g),{400:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@3x.png",width:400,height:280},403:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@3x.png",width:400,height:280},404:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@3x.png",width:400,height:280},408:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@3x.png",width:400,height:280},500:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@3x.png",width:400,height:280},502:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@3x.png",width:400,height:280},503:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@3x.png",width:400,height:280},504:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@3x.png",width:400,height:280},confirmation:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@3x.png",width:400,height:280},inactivity:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@3x.png",width:400,height:280},"link-error":{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@3x.png",width:400,height:280},logout:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@3x.png",width:400,height:280},warning:{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@3x.png",width:400,height:280},"payment-unsuccessful":{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@3x.png",width:400,height:280},"no-item-found":{base:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found.png",md:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@2x.png",lg:"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@3x.png",width:400,height:280}}),o=(e,g)=>new Map([["400",{img:t(e[400],g),title:"Something went wrong",description:"This could be a temporary problem, so please refresh the page or try again later."}],["403",{img:t(e[403],g),title:"Error loading page",description:"You may not have permission to view this page. If someone gave you this link, let them know about this error."}],["404",{img:t(e[404],g),title:"Page not found",description:"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know about this error."}],["408",{img:t(e[408],g),title:"Something went wrong",description:"This could be a temporary problem, so please refresh the page or try again later."}],["500",{img:t(e[500],g),title:"Something went wrong",description:"We're working on a fix for the problem. Please try again later."}],["502",{img:t(e[502],g),title:"Something went wrong",description:"This could be a temporary problem, so please refresh the page or try again later."}],["503",{img:t(e[503],g),title:"Service under maintenance",description:"This service is currently unavailable. Please try again later."}],["504",{img:t(e[504],g),title:"Something went wrong",description:"This could be a temporary problem, so please refresh the page or try again later."}],["confirmation",{img:t(e.confirmation,g),title:"Leave and lose changes?",description:"You have unsaved changes. If you leave this page, you will lose the changes you’ve made."}],["link-error",{img:t(e["link-error"],g),title:"Link has expired",description:"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know it has expired."}],["logout",{img:t(e.logout,g),title:"You’ve been logged out",description:"It looks like you’ve left, so we logged you out to protect your privacy."}],["insufficient-credits",{img:t(e["insufficient-credits"],g),title:"Insufficient credits",description:"You do not have enough credits to make this transaction."}],["inactivity",{img:t(e.inactivity,g),title:"Are you still there?",description:"You’ve been inactive for a while. To protect your privacy, you’ll be logged out soon.\n\nIf you wish to stay on this page, let us know now.",renderDescription:s("inactivity")}],["maintenance",{img:t(e[503],g),title:"Service under maintenance",description:"This service is currently unavailable. Please try again later.",renderDescription:s("maintenance")}],["no-item-found",{img:t(e["no-item-found"],g),title:"No results found",description:"Try adjusting your search or filters to find what you’re looking for."}],["payment-unsuccessful",{img:t(e["payment-unsuccessful"],g),title:"Unsuccessful payment",description:"Your payment was unsuccessful. Please try again."}],["transfer-unsuccessful",{img:t(e["transfer-unsuccessful"],g),title:"Unsuccessful transfer",description:"Your transfer was unsuccessful. Please try again."}],["unsupported-browser",{img:t(e["unsupported-browser"],g),title:"Browser not supported",description:"Download the latest version of Chrome, Edge, Firefox or Safari."}],["partially-supported-browser",{img:t(e["unsupported-browser"],g),title:"Browser version not supported",description:"Update to the latest version of Chrome, Edge, Firefox or Safari."}],["warning",{img:t(e.warning,g),title:"Are you sure?",description:"You will lose your progress."}]]),m=(s,e,t)=>{switch(e){case"bookingsg":return o(r,t).get(s);case"careercompass":return o(i,t).get(s);case"ccube":return o(a,t).get(s);case"mylegacy":case"smgs":return o(n,t).get(s);default:return o(g,t).get(s)}};export{o as generateErrorDisplayData,m as getErrorDisplayData};
 //# sourceMappingURL=error-display-data.js.map