@lifesg/react-design-system 3.4.0-canary.6 → 3.4.0-canary.7

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 { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\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 { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport {\n    ActionBar,\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    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 tableEndRef = useRef<HTMLDivElement | null>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarRef = 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 [scrollable, setScrollable] = useState(false);\n    const [scrollEnd, setScrollEnd] = useState(false);\n    const [tableEnd, setTableEnd] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n    const [showLastBorder, setShowLastBorder] = useState(false);\n\n    const { ref: endRef, inView: end } = useInView();\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const onResize = useCallback(() => {\n        if (!wrapperRef.current || !actionBarRef.current) {\n            return;\n        }\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n        setScrollable(scrollable);\n\n        if (scrollable) {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        } else {\n            calculateStickyInViewport();\n        }\n    }, []);\n\n    useEffect(() => {\n        onResize();\n    }, []);\n\n    useResizeDetector({ onResize });\n\n    const scrollHandler = () => {\n        requestAnimationFrame(() => {\n            if (scrollable) {\n                calculateFixedInViewport();\n            } else {\n                calculateStickyInViewport();\n            }\n        });\n\n        if (wrapperRef.current) {\n            setTableEnd(\n                wrapperRef.current.getBoundingClientRect().bottom <=\n                    window.innerHeight\n            );\n        }\n    };\n\n    useEventListener(\"scroll\", scrollHandler, \"window\");\n\n    useEffect(() => {\n        checkLastBorder();\n    }, [rows]);\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\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 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 calculateFixedInViewport = () => {\n        if (!wrapperRef.current) {\n            return;\n        }\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        setIsFloatingActionBar(\n            wrapperBounds.bottom > window.innerHeight + 30 &&\n                wrapperBounds.top < window.innerHeight - 200\n        );\n    };\n\n    const calculateStickyInViewport = () => {\n        if (\n            !tableRef.current ||\n            !tableEndRef.current ||\n            !wrapperRef.current ||\n            !actionBarRef.current ||\n            !headerRef.current\n        ) {\n            return;\n        }\n\n        const endBounds = tableEndRef.current.getBoundingClientRect();\n\n        if (endBounds.top > window.innerHeight) {\n            const bottomOffset = endBounds.bottom - window.innerHeight;\n            const bottomToHeaderOffset =\n                tableRef.current.getBoundingClientRect().height -\n                headerRef.current.clientHeight -\n                32;\n            const maxBottomOffset = Math.min(\n                bottomOffset,\n                bottomToHeaderOffset\n            );\n\n            actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n        } else {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        }\n    };\n\n    const checkLastBorder = () => {\n        if (!tableRef.current || !wrapperRef.current) {\n            return;\n        }\n        // 56 pixels added due to the behavior of action bar\n        setShowLastBorder(\n            tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n                wrapperRef.current.clientHeight\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        <thead ref={headerRef}>\n            <HeaderRow>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </HeaderRow>\n        </thead>\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                            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            <tr>\n                <EmptyViewCell colSpan={getTotalColumns()}>\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </EmptyViewCell>\n            </tr>\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                        $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            <tr>\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            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n\n        return (\n            <ActionBarWrapper\n                ref={actionBarRef}\n                $fixed={isFloatingActionBar}\n                $left={tableRef?.current?.getBoundingClientRect()?.left}\n                $width={tableRef?.current?.clientWidth}\n            >\n                <ActionBar\n                    $float={\n                        (scrollable ? !scrollEnd : !end) || isFloatingActionBar\n                    }\n                    $scrollable={scrollable}\n                >\n                    <Typography.BodyMD weight=\"semibold\">{`${count} item${\n                        count > 1 ? \"s\" : \"\"\n                    } selected`}</Typography.BodyMD>\n                    <TextButton\n                        type=\"button\"\n                        aria-label={`Clear selection of ${count} item${\n                            count === 1 ? \"\" : \"s\"\n                        }`}\n                        onClick={onClearSelectionClick}\n                    >\n                        Clear selection\n                    </TextButton>\n                    {actionBarContent}\n                </ActionBar>\n            </ActionBarWrapper>\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            onScroll={() => {\n                if (scrollable && wrapperRef.current) {\n                    setScrollEnd(\n                        wrapperRef.current.scrollTop +\n                            wrapperRef.current.clientHeight >=\n                            wrapperRef.current.scrollHeight\n                    );\n                }\n            }}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <TableContainer>\n                <Table\n                    $end={tableEnd}\n                    $scrollable={scrollable}\n                    ref={tableRef}\n                    $stickyHeader={enableStickyHeader}\n                >\n                    {renderHeaders()}\n                    <TableBody $showLastRowBottomBorder={showLastBorder}>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </TableBody>\n                </Table>\n            </TableContainer>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n            <div\n                ref={(r) => {\n                    tableEndRef.current = r;\n                    endRef(r);\n                }}\n            />\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","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","tableEnd","setTableEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","onResize","useCallback","current","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","getBoundingClientRect","bottom","window","innerHeight","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","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","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","disabled","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","onScroll","scrollTop","tabIndex","TableContainer","Table","$end","$stickyHeader","HeaderRow","TableBody","$showLastRowBottomBorder","EmptyViewCell","colSpan","BodyRow","$alternating","$isSelectable","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","ActionBarWrapper","$fixed","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","$float","$scrollable","BodyMD","TextButton","renderSelectionBar","r"],"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 { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\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 { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport {\n    ActionBar,\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    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 tableEndRef = useRef<HTMLDivElement | null>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarRef = 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 [scrollable, setScrollable] = useState(false);\n    const [scrollEnd, setScrollEnd] = useState(false);\n    const [tableEnd, setTableEnd] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n    const [showLastBorder, setShowLastBorder] = useState(false);\n\n    const { ref: endRef, inView: end } = useInView();\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const onResize = useCallback(() => {\n        if (!wrapperRef.current || !actionBarRef.current) {\n            return;\n        }\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n        setScrollable(scrollable);\n\n        if (scrollable) {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        } else {\n            calculateStickyInViewport();\n        }\n    }, []);\n\n    useEffect(() => {\n        onResize();\n    }, []);\n\n    useResizeDetector({ onResize });\n\n    const scrollHandler = () => {\n        requestAnimationFrame(() => {\n            if (scrollable) {\n                calculateFixedInViewport();\n            } else {\n                calculateStickyInViewport();\n            }\n        });\n\n        if (wrapperRef.current) {\n            setTableEnd(\n                wrapperRef.current.getBoundingClientRect().bottom <=\n                    window.innerHeight\n            );\n        }\n    };\n\n    useEventListener(\"scroll\", scrollHandler, \"window\");\n\n    useEffect(() => {\n        checkLastBorder();\n    }, [rows]);\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 calculateFixedInViewport = () => {\n        if (!wrapperRef.current) {\n            return;\n        }\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        setIsFloatingActionBar(\n            wrapperBounds.bottom > window.innerHeight + 30 &&\n                wrapperBounds.top < window.innerHeight - 200\n        );\n    };\n\n    const calculateStickyInViewport = () => {\n        if (\n            !tableRef.current ||\n            !tableEndRef.current ||\n            !wrapperRef.current ||\n            !actionBarRef.current ||\n            !headerRef.current\n        ) {\n            return;\n        }\n\n        const endBounds = tableEndRef.current.getBoundingClientRect();\n\n        if (endBounds.top > window.innerHeight) {\n            const bottomOffset = endBounds.bottom - window.innerHeight;\n            const bottomToHeaderOffset =\n                tableRef.current.getBoundingClientRect().height -\n                headerRef.current.clientHeight -\n                32;\n            const maxBottomOffset = Math.min(\n                bottomOffset,\n                bottomToHeaderOffset\n            );\n\n            actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n        } else {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        }\n    };\n\n    const checkLastBorder = () => {\n        if (!tableRef.current || !wrapperRef.current) {\n            return;\n        }\n        // 56 pixels added due to the behavior of action bar\n        setShowLastBorder(\n            tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n                wrapperRef.current.clientHeight\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        <thead ref={headerRef}>\n            <HeaderRow>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </HeaderRow>\n        </thead>\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                        $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\n        return (\n            <ActionBarWrapper\n                ref={actionBarRef}\n                $fixed={isFloatingActionBar}\n                $left={tableRef?.current?.getBoundingClientRect()?.left}\n                $width={tableRef?.current?.clientWidth}\n            >\n                <ActionBar\n                    $float={\n                        (scrollable ? !scrollEnd : !end) || isFloatingActionBar\n                    }\n                    $scrollable={scrollable}\n                >\n                    <Typography.BodyMD weight=\"semibold\">{`${count} item${\n                        count > 1 ? \"s\" : \"\"\n                    } selected`}</Typography.BodyMD>\n                    <TextButton\n                        type=\"button\"\n                        aria-label={`Clear selection of ${count} item${\n                            count === 1 ? \"\" : \"s\"\n                        }`}\n                        onClick={onClearSelectionClick}\n                    >\n                        Clear selection\n                    </TextButton>\n                    {actionBarContent}\n                </ActionBar>\n            </ActionBarWrapper>\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            onScroll={() => {\n                if (scrollable && wrapperRef.current) {\n                    setScrollEnd(\n                        wrapperRef.current.scrollTop +\n                            wrapperRef.current.clientHeight >=\n                            wrapperRef.current.scrollHeight\n                    );\n                }\n            }}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <TableContainer>\n                <Table\n                    $end={tableEnd}\n                    $scrollable={scrollable}\n                    ref={tableRef}\n                    $stickyHeader={enableStickyHeader}\n                >\n                    {renderHeaders()}\n                    <TableBody $showLastRowBottomBorder={showLastBorder}>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </TableBody>\n                </Table>\n            </TableContainer>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n            <div\n                ref={(r) => {\n                    tableEndRef.current = r;\n                    endRef(r);\n                }}\n            />\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","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","tableEnd","setTableEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","onResize","useCallback","current","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","getBoundingClientRect","bottom","window","innerHeight","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","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","onScroll","scrollTop","tabIndex","TableContainer","Table","$end","$stickyHeader","HeaderRow","TableBody","$showLastRowBottomBorder","BodyRow","$alternating","EmptyViewCell","colSpan","$isSelectable","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","ActionBarWrapper","$fixed","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","$float","$scrollable","BodyMD","TextButton","renderSelectionBar","r"],"mappings":"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"}

package/filter/filter-modal.styles.js

@@ -1,30 +1,31 @@
-import i from"styled-components";import{Button as t}from"../button/button.js";import{ButtonWithIcon as n}from"../button-with-icon/button-with-icon.js";import{Colour as o,Spacing as e,Font as a}from"../theme/index.js";const g=i.div`
+import i from"styled-components";import{Button as t}from"../button/button.js";import{ButtonWithIcon as n}from"../button-with-icon/button-with-icon.js";import{Colour as o,Spacing as e,Font as a}from"../theme/index.js";const r=i.div`
     background-color: ${o["bg-strong"]};
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
-`,r=i.div`
+`,g=i.div`
     background-color: ${o.bg};
     height: 100%;
     width: 100%;
 `,s=i.div`
     height: 100%;
-`,d=i.div`
+`,c=i.div`
     display: flex;
     align-items: center;
     background-color: ${o.bg};
     ${i=>i.$insetTop&&`padding-top: ${i.$insetTop}px;`}
-`,p=i.div`
+`,d=i.div`
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: ${e["spacing-8"]};
     margin: ${e["spacing-24"]} 0;
-`,c=i.h2`
+`,l=i.h2`
     ${a["heading-xs-semibold"]}
-`,l=i.span`
+    color: ${o.text};
+`,p=i.span`
     display: inline-flex;
     align-items: center;
     gap: ${e["spacing-8"]};
@@ -34,5 +35,5 @@ import i from"styled-components";import{Button as t}from"../button/button.js";im
     padding: ${e["spacing-24"]} ${e["spacing-20"]};
 `,h=i(n.Default)`
     width: 100%;
-`;export{h as FilterButton,m as FilterClearButton,d as FilterHeader,c as FilterTitle,p as FilterTitleGroup,l as FilterToggleContent,s as FloatingWrapper,g as MobileContainer,r as MobileOverlayContainer};
+`;export{h as FilterButton,m as FilterClearButton,c as FilterHeader,l as FilterTitle,d as FilterTitleGroup,p as FilterToggleContent,s as FloatingWrapper,r as MobileContainer,g as MobileOverlayContainer};
 //# sourceMappingURL=filter-modal.styles.js.map

package/filter/filter-modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.styles.js","sources":["../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"yNAgBO,MAAMA,EAAkBC,EAAOC,GAAG;wBACjBC,EAAO;;;;;EAOlBC,EAAyBH,EAAOC,GAAG;wBACxBC,EAAW;;;EAKtBE,EAAkBJ,EAAOC,GAAG;;EAQ5BI,EAAeL,EAAOC,GAAsB;;;wBAGjCC,EAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAOC,GAAG;;;;;WAK/BQ,EAAQ;cACLA,EAAQ;EAGTC,EAAcV,EAAOW,EAAE;MAC9BC,EAAK;EAGEC,EAAsBb,EAAOc,IAAI;;;WAGnCL,EAAQ;EAGNM,EAAoBf,EAAOgB,EAAOC,MAAM;;;eAGtCR,EAAQ,iBAAiBA,EAAQ;EAOnCS,EAAelB,EAAOmB,EAAeC,QAAQ;;"}
+{"version":3,"file":"filter-modal.styles.js","sources":["../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"yNAgBO,MAAMA,EAAkBC,EAAOC,GAAG;wBACjBC,EAAO;;;;;EAOlBC,EAAyBH,EAAOC,GAAG;wBACxBC,EAAW;;;EAKtBE,EAAkBJ,EAAOC,GAAG;;EAQ5BI,EAAeL,EAAOC,GAAsB;;;wBAGjCC,EAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAOC,GAAG;;;;;WAK/BQ,EAAQ;cACLA,EAAQ;EAGTC,EAAcV,EAAOW,EAAE;MAC9BC,EAAK;aACEV,EAAa;EAGbW,EAAsBb,EAAOc,IAAI;;;WAGnCL,EAAQ;EAGNM,EAAoBf,EAAOgB,EAAOC,MAAM;;;eAGtCR,EAAQ,iBAAiBA,EAAQ;EAOnCS,EAAelB,EAAOmB,EAAeC,QAAQ;;"}

package/filter/filter-sidebar.styles.js

@@ -1,28 +1,29 @@
-import i from"styled-components";import{Button as o}from"../button/button.js";import{Colour as n,Border as r,Radius as t,Spacing as e,Font as d}from"../theme/index.js";const a=i.div`
-    background-color: ${n.bg};
-    border: ${r["width-010"]} ${r.solid} ${n.border};
-    border-radius: ${t.md};
+import i from"styled-components";import{Button as o}from"../button/button.js";import{Colour as t,Border as r,Radius as e,Spacing as n,Font as d}from"../theme/index.js";const a=i.div`
+    background-color: ${t.bg};
+    border: ${r["width-010"]} ${r.solid} ${t.border};
+    border-radius: ${e.md};
     overflow: hidden;
     width: 100%;
 `,s=i.div`
     display: flex;
     align-items: center;
 
-    background-color: ${n.bg};
+    background-color: ${t.bg};
+    color: ${t.text};
 `,g=i.div`
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: ${e["spacing-8"]};
-    margin: ${e["spacing-24"]} 0 ${e["spacing-24"]}
-        ${e["spacing-20"]};
+    gap: ${n["spacing-8"]};
+    margin: ${n["spacing-24"]} 0 ${n["spacing-24"]}
+        ${n["spacing-20"]};
 `,l=i.h2`
     ${d["heading-xs-semibold"]}
 `,c=i(o.Small)`
     background-color: transparent;
-    padding-right: ${e["spacing-20"]};
-    padding-left: ${e["spacing-20"]};
+    padding-right: ${n["spacing-20"]};
+    padding-left: ${n["spacing-20"]};
     height: 100%;
 `;export{a as DesktopContainer,c as FilterClearButton,s as FilterHeader,l as FilterTitle,g as FilterTitleGroup};
 //# sourceMappingURL=filter-sidebar.styles.js.map

package/filter/filter-sidebar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.styles.js","sources":["../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;EAGtBI,EAAmBN,EAAOC,GAAG;;;;;WAK/BM,EAAQ;cACLA,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,EAAcR,EAAOS,EAAE;MAC9BC,EAAK;EAGEC,EAAoBX,EAAOY,EAAOC,MAAM;;qBAEhCN,EAAQ;oBACTA,EAAQ;;"}
+{"version":3,"file":"filter-sidebar.styles.js","sources":["../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;aACtBA,EAAa;EAGbI,EAAmBN,EAAOC,GAAG;;;;;WAK/BM,EAAQ;cACLA,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,EAAcR,EAAOS,EAAE;MAC9BC,EAAK;EAGEC,EAAoBX,EAAOY,EAAOC,MAAM;;qBAEhCN,EAAQ;oBACTA,EAAQ;;"}

package/filter/filter.styles.js

@@ -1,11 +1,12 @@
-import o from"styled-components";import{Button as t}from"../button/button.js";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{Spacing as r,Colour as e,Border as n}from"../theme/index.js";const d=o.div`
+import o from"styled-components";import{Button as t}from"../button/button.js";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{Colour as r,Spacing as e,Border as n}from"../theme/index.js";const c=o.div`
     flex: 1;
     width: 100%;
     overflow-y: auto;
-`,c=o(i)`
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
+    color: ${r.text};
+`,d=o(i)`
+    padding: ${e["spacing-24"]} ${e["spacing-20"]};
     margin-right: auto;
-    color: ${e.icon};
+    color: ${r.icon};
 
     svg {
         height: 1.5rem;
@@ -13,14 +14,14 @@ import o from"styled-components";import{Button as t}from"../button/button.js";im
     }
 
     &:hover {
-        color: ${e["icon-hover"]};
+        color: ${r["icon-hover"]};
     }
 `,m=o.div`
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
-    background-color: ${e.bg};
-    border-top: ${n["width-010"]} ${n.solid} ${e.border};
+    padding: ${e["spacing-24"]} ${e["spacing-20"]};
+    background-color: ${r.bg};
+    border-top: ${n["width-010"]} ${n.solid} ${r.border};
     ${o=>o.$insetBottom&&`padding-bottom: ${o.$insetBottom}px;`}
 `,a=o(t.Default)`
     width: 100%;
-`;export{d as FilterBody,a as FilterDoneButton,m as FilterFooter,c as FilterHeaderButton};
+`;export{c as FilterBody,a as FilterDoneButton,m as FilterFooter,d as FilterHeaderButton};
 //# sourceMappingURL=filter.styles.js.map

package/filter/filter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.styles.js","sources":["../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n    $insetBottom?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n    flex: 1;\n    width: 100%;\n    overflow-y: auto;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    margin-right: auto;\n    color: ${Colour[\"icon\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    ${(props) =>\n        props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n    width: 100%;\n`;\n"],"names":["FilterBody","styled","div","FilterHeaderButton","ClickableIcon","Spacing","Colour","FilterFooter","Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"6NAiBO,MAAMA,EAAaC,EAAOC,GAAG;;;;EAUvBC,EAAqBF,EAAOG,EAAc;eACxCC,EAAQ,iBAAiBA,EAAQ;;aAEnCC,EAAa;;;;;;;;iBAQTA,EAAO;;EAQXC,EAAeN,EAAOC,GAAsB;eAC1CG,EAAQ,iBAAiBA,EAAQ;wBACxBC,EAAW;kBACjBE,EAAO,gBAAgBA,EAAc,SAAKF,EAAe;MACpEG,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAOW,EAAOC,QAAQ;;"}
+{"version":3,"file":"filter.styles.js","sources":["../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n    $insetBottom?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n    flex: 1;\n    width: 100%;\n    overflow-y: auto;\n    color: ${Colour[\"text\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    margin-right: auto;\n    color: ${Colour[\"icon\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    ${(props) =>\n        props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n    width: 100%;\n`;\n"],"names":["FilterBody","styled","div","Colour","FilterHeaderButton","ClickableIcon","Spacing","FilterFooter","Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"6NAiBO,MAAMA,EAAaC,EAAOC,GAAG;;;;aAIvBC,EAAa;EAObC,EAAqBH,EAAOI,EAAc;eACxCC,EAAQ,iBAAiBA,EAAQ;;aAEnCH,EAAa;;;;;;;;iBAQTA,EAAO;;EAQXI,EAAeN,EAAOC,GAAsB;eAC1CI,EAAQ,iBAAiBA,EAAQ;wBACxBH,EAAW;kBACjBK,EAAO,gBAAgBA,EAAc,SAAKL,EAAe;MACpEM,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAOW,EAAOC,QAAQ;;"}

package/package.json

@@ -1,7 +1,23 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.4.0-canary.6",
+  "version": "3.4.0-canary.7",
   "description": "A component design system for LifeSG web apps",
+  "keywords": [
+    "design-system"
+  ],
+  "homepage": "https://github.com/LifeSG/react-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/LifeSG/react-design-system/issues"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LifeSG/react-design-system.git"
+  },
+  "engines": {
+    "npm": ">=11.10.0",
+    "node": ">=22.0.0"
+  },
   "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",

package/shared/dropdown-wrapper/dropdown-wrapper.styles.js

@@ -1,25 +1,26 @@
-import e,{css as t}from"styled-components";import{Colour as i,Font as r}from"../../theme/index.js";import{lineClampCss as l}from"../styles/index.js";const o=e.div`
+import e,{css as t}from"styled-components";import{Colour as r,Font as i}from"../../theme/index.js";import{lineClampCss as l}from"../styles/index.js";const o=e.div`
     position: relative;
     width: 100%;
-    ${e=>{const i="small"===e.$variant?2.5:3;return t`
-            min-height: ${i}rem;
-            height: ${i}rem; // Need this to persist the height when expanding or collapsing list
+    ${e=>{const r="small"===e.$variant?2.5:3;return t`
+            min-height: ${r}rem;
+            height: ${r}rem; // Need this to persist the height when expanding or collapsing list
         `}}
 `,d=e.div`
     display: flex;
     flex: 1;
     word-break: break-all;
     ${e=>{if(e.$disabled)return t`
-                color: ${i["text-disabled"]};
+                color: ${r["text-disabled"]};
             `}}
 `,n=e.div`
-    ${e=>"small"===e.$variant?r["body-md-regular"]:r["body-baseline-regular"]}
+    ${e=>"small"===e.$variant?i["body-md-regular"]:i["body-baseline-regular"]}
+    color: ${r.text};
     text-align: left;
     ${e=>{if("middle"!==e.$truncateType)return t`
                     ${l(1)}
                 `}}
     overflow: hidden;
 `,s=e(n)`
-    color: ${i["text-subtler"]};
+    color: ${r["text-subtler"]};
 `;export{d as LabelContainer,s as PlaceholderLabel,n as ValueLabel,o as Wrapper};
 //# sourceMappingURL=dropdown-wrapper.styles.js.map

package/shared/dropdown-wrapper/dropdown-wrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font } from \"../../theme\";\nimport { DropdownVariantType, TruncateType } from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\nexport interface DropdownWrapperStyleProps {\n    $disabled?: boolean;\n    $readOnly?: boolean;\n    $error?: boolean;\n    $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface SelectorStyleProps {\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface LabelContainerStyleProps {\n    $disabled?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType | undefined) => {\n    return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const Wrapper = styled.div<SelectorStyleProps>`\n    position: relative;\n    width: 100%;\n    ${(props) => {\n        const height = getHeight(props.$variant);\n        return css`\n            min-height: ${height}rem;\n            height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n        `;\n    }}\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n    display: flex;\n    flex: 1;\n    word-break: break-all;\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Wrapper","styled","div","props","height","$variant","css","LabelContainer","$disabled","Colour","ValueLabel","Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"qJA+BA,MAIaA,EAAUC,EAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAPS,UAOUD,EAAME,SAPN,IAAM,EAQ/B,OAAOC,CAAG;0BACQF;sBACJA;SACb;EAIIG,EAAiBN,EAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMK,UACN,OAAOF,CAAG;yBACGG,EAAO;aAExB;EAIKC,EAAaT,EAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAM,EAAK,mBACLA,EAAK;;MAEZR,IACC,GACS,WADDA,EAAMS,cAKN,OAAON,CAAG;sBACJO,EAAa;;;EAOtBC,EAAmBb,EAAOS,EAAW;aACrCD,EAAO;"}
+{"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font } from \"../../theme\";\nimport { DropdownVariantType, TruncateType } from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\nexport interface DropdownWrapperStyleProps {\n    $disabled?: boolean;\n    $readOnly?: boolean;\n    $error?: boolean;\n    $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface SelectorStyleProps {\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface LabelContainerStyleProps {\n    $disabled?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType | undefined) => {\n    return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const Wrapper = styled.div<SelectorStyleProps>`\n    position: relative;\n    width: 100%;\n    ${(props) => {\n        const height = getHeight(props.$variant);\n        return css`\n            min-height: ${height}rem;\n            height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n        `;\n    }}\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n    display: flex;\n    flex: 1;\n    word-break: break-all;\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Wrapper","styled","div","props","height","$variant","css","LabelContainer","$disabled","Colour","ValueLabel","Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"qJA+BA,MAIaA,EAAUC,EAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAPS,UAOUD,EAAME,SAPN,IAAM,EAQ/B,OAAOC,CAAG;0BACQF;sBACJA;SACb;EAIIG,EAAiBN,EAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMK,UACN,OAAOF,CAAG;yBACGG,EAAO;aAExB;EAIKC,EAAaT,EAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAM,EAAK,mBACLA,EAAK;aACNF,EAAa;;MAEnBN,IACC,GACS,WADDA,EAAMS,cAKN,OAAON,CAAG;sBACJO,EAAa;;;EAOtBC,EAAmBb,EAAOS,EAAW;aACrCD,EAAO;"}

package/shared/internal-calendar/single/single-cell.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{CalendarHelper as r}from"../../../util/calendar-helper.js";import"../../../util/date-helper.js";import"../../../util/date-input-helper.js";import"react";import"../../../util/simple-id-generator.js";import"../../../util/string-helper.js";import"@react-aria/live-announcer";import{DayCell as a}from"../day-cell/day-cell.js";const o=({date:o,calendarDate:l,selectedDate:i,hoverDate:n,focusDate:c,minDate:s,maxDate:d,disabledDates:u,allowDisabledSelection:m,showActiveMonthDaysOnly:p,onSelect:y,onHover:D,onFocus:h,setFocusCell:f,tabIndex:b})=>{const v=r.isDisabledDay(o,u,s,d),Y=!v||m,j=()=>{y(o,!Y)},w={date:o,calendarDate:l,disabled:v,interactive:Y,currentDateIndicator:!0,onSelect:j,onHover:()=>{D(o.format("YYYY-MM-DD"),!Y)},onFocus:()=>{h(o.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(Y&&j());(e=>{let t;const r={ArrowLeft:()=>o.subtract(1,"day"),ArrowRight:()=>o.add(1,"day"),ArrowUp:()=>o.subtract(7,"day"),ArrowDown:()=>o.add(7,"day"),Home:()=>o.startOf("week"),End:()=>o.endOf("week"),PageUp:()=>e.shiftKey?o.subtract(1,"year"):o.subtract(1,"month"),PageDown:()=>e.shiftKey?o.add(1,"year"):o.add(1,"month")}[e.key];r&&(e.preventDefault(),t=r(),f(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t(c),tabIndex:b};return e(a,Object.assign({},w,(()=>{const e={};l.month()!==o.month()?e.labelType=p?"hidden":"unavailable":t().isSame(o,"day")&&!v&&(e.labelType="current");const r=o.isSame(i,"day"),a=o.isSame(n,"day");return r&&a?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):r?(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"):a&&(e.labelType="hover",e.circleLeft="hover-subtle",e.circleRight="hover-subtle"),e})()))};export{o as SingleCell};
+import{jsx as e}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{CalendarHelper as r}from"../../../util/calendar-helper.js";import"../../../util/date-helper.js";import"../../../util/date-input-helper.js";import"react";import"../../../util/simple-id-generator.js";import"../../../util/string-helper.js";import"@react-aria/live-announcer";import{DayCell as a}from"../day-cell/day-cell.js";const o=({date:o,calendarDate:l,selectedDate:i,hoverDate:n,focusDate:c,minDate:s,maxDate:d,disabledDates:u,allowDisabledSelection:m,showActiveMonthDaysOnly:p,onSelect:y,onHover:D,onFocus:h,setFocusCell:f,tabIndex:b})=>{const v=r.isDisabledDay(o,u,s,d),Y=!v||m,j=()=>{y(o,!Y)},w={date:o,calendarDate:l,disabled:v,interactive:Y,currentDateIndicator:!0,onSelect:j,onHover:()=>{D(o.format("YYYY-MM-DD"),!Y)},onFocus:()=>{h(o.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(Y&&j());(e=>{let t;const r={ArrowLeft:()=>o.subtract(1,"day"),ArrowRight:()=>o.add(1,"day"),ArrowUp:()=>o.subtract(7,"day"),ArrowDown:()=>o.add(7,"day"),Home:()=>o.startOf("week"),End:()=>o.endOf("week"),PageUp:()=>e.shiftKey?o.subtract(1,"year"):o.subtract(1,"month"),PageDown:()=>e.shiftKey?o.add(1,"year"):o.add(1,"month")}[e.key];r&&(e.preventDefault(),t=r(),f(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t(c),tabIndex:b};return e(a,Object.assign({},w,(()=>{const e={};l.month()!==o.month()?e.labelType=p?"hidden":"unavailable":t().isSame(o,"day")&&!v&&(e.labelType="current");const r=i&&o.isSame(i,"day"),a=o.isSame(n,"day");return r&&a?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):r?(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"):a&&(e.labelType="hover",e.circleLeft="hover-subtle",e.circleRight="hover-subtle"),e})()))};export{o as SingleCell};
 //# sourceMappingURL=single-cell.js.map

package/shared/internal-calendar/single/single-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-cell.js","sources":["../../../../src/shared/internal-calendar/single/single-cell.tsx"],"sourcesContent":["import dayjs, { Dayjs } from \"dayjs\";\nimport { CalendarHelper } from \"../../../util\";\nimport { CellStyleProps, DayCell, DayCellProps } from \"../day-cell\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    selectedDate: string | undefined;\n    hoverDate: string | undefined;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    showActiveMonthDaysOnly?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const SingleCell = ({\n    date,\n    calendarDate,\n    selectedDate,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    showActiveMonthDaysOnly,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowLeft: () => date.subtract(1, \"day\"),\n            ArrowRight: () => date.add(1, \"day\"),\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = showActiveMonthDaysOnly\n                ? \"hidden\"\n                : \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        }\n\n        const isSelected = date.isSame(selectedDate, \"day\");\n        const isHover = date.isSame(hoverDate, \"day\");\n\n        if (isSelected && isHover) {\n            props.labelType = \"selected-hover\";\n            props.circleLeft = \"selected-hover-outline\";\n            props.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            props.labelType = \"selected\";\n            props.circleLeft = \"selected-outline\";\n            props.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            props.labelType = \"hover\";\n            props.circleLeft = \"hover-subtle\";\n            props.circleRight = \"hover-subtle\";\n        }\n\n        return props;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        role: \"gridcell\",\n        focusDate: dayjs(focusDate),\n        tabIndex,\n    };\n\n    return <DayCell {...commonProps} {...getCellStyle()} />;\n};\n"],"names":["SingleCell","date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","dayjs","_jsx","DayCell","Object","assign","props","month","labelType","isSame","isSelected","isHover","circleLeft","circleRight","getCellStyle"],"mappings":"qaAsBO,MAAMA,EAAa,EACtBC,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,0BACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAeC,cAC5BjB,EACAO,EACAF,EACAC,GAEEY,GAAeH,GAAYP,EAK3BW,EAAe,KACjBT,EAASV,GAAOkB,EAAY,EA8F1BE,EAA4B,CAC9BpB,OACAC,eACAc,WACAG,cACAG,sBAAsB,EACtBX,SAAUS,EACVR,QAlGgB,KAChBA,EAAQX,EAAKsB,OAAO,eAAgBJ,EAAY,EAkGhDN,QA/FgB,KAChBA,EAAQZ,EAAKsB,OAAO,cAAc,EA+FlCC,UA9DmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACFT,GACAC,KArCgB,CAACK,IACzB,IAAII,EAEJ,MAmBMC,EAnBgD,CAClDC,UAAW,IAAM9B,EAAK+B,SAAS,EAAG,OAClCC,WAAY,IAAMhC,EAAKiC,IAAI,EAAG,OAC9BC,QAAS,IAAMlC,EAAK+B,SAAS,EAAG,OAChCI,UAAW,IAAMnC,EAAKiC,IAAI,EAAG,OAC7BG,KAAM,IAAMpC,EAAKqC,QAAQ,QACzBC,IAAK,IAAMtC,EAAKuC,MAAM,QACtBC,OAAQ,IACGhB,EAAMiB,SACPzC,EAAK+B,SAAS,EAAG,QACjB/B,EAAK+B,SAAS,EAAG,SAE3BW,SAAU,IACClB,EAAMiB,SACPzC,EAAKiC,IAAI,EAAG,QACZjC,EAAKiC,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBhB,EAAae,EAAkBN,OAAO,eAC1C,EAeAqB,CAAoBnB,EAAM,EAmD1BoB,KAAM,WACNxC,UAAWyC,EAAMzC,GACjBU,YAGJ,OAAOgC,EAACC,EAAOC,OAAAC,OAAA,CAAA,EAAK7B,EAlDC,MACjB,MAAM8B,EAAwB,CAAA,EAE1BjD,EAAakD,UAAYnD,EAAKmD,QAC9BD,EAAME,UAAY3C,EACZ,SACA,cACCoC,IAAQQ,OAAOrD,EAAM,SAAWe,IACvCmC,EAAME,UAAY,WAGtB,MAAME,EAAatD,EAAKqD,OAAOnD,EAAc,OACvCqD,EAAUvD,EAAKqD,OAAOlD,EAAW,OAgBvC,OAdImD,GAAcC,GACdL,EAAME,UAAY,iBAClBF,EAAMM,WAAa,yBACnBN,EAAMO,YAAc,0BACbH,GACPJ,EAAME,UAAY,WAClBF,EAAMM,WAAa,mBACnBN,EAAMO,YAAc,oBACbF,IACPL,EAAME,UAAY,QAClBF,EAAMM,WAAa,eACnBN,EAAMO,YAAc,gBAGjBP,CAAK,EAsBqBQ,IAAkB"}
+{"version":3,"file":"single-cell.js","sources":["../../../../src/shared/internal-calendar/single/single-cell.tsx"],"sourcesContent":["import dayjs, { Dayjs } from \"dayjs\";\nimport { CalendarHelper } from \"../../../util\";\nimport { CellStyleProps, DayCell, DayCellProps } from \"../day-cell\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    selectedDate: string | undefined;\n    hoverDate: string | undefined;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    showActiveMonthDaysOnly?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const SingleCell = ({\n    date,\n    calendarDate,\n    selectedDate,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    showActiveMonthDaysOnly,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowLeft: () => date.subtract(1, \"day\"),\n            ArrowRight: () => date.add(1, \"day\"),\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = showActiveMonthDaysOnly\n                ? \"hidden\"\n                : \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        }\n\n        const isSelected = selectedDate && date.isSame(selectedDate, \"day\");\n        const isHover = date.isSame(hoverDate, \"day\");\n\n        if (isSelected && isHover) {\n            props.labelType = \"selected-hover\";\n            props.circleLeft = \"selected-hover-outline\";\n            props.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            props.labelType = \"selected\";\n            props.circleLeft = \"selected-outline\";\n            props.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            props.labelType = \"hover\";\n            props.circleLeft = \"hover-subtle\";\n            props.circleRight = \"hover-subtle\";\n        }\n\n        return props;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        role: \"gridcell\",\n        focusDate: dayjs(focusDate),\n        tabIndex,\n    };\n\n    return <DayCell {...commonProps} {...getCellStyle()} />;\n};\n"],"names":["SingleCell","date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","dayjs","_jsx","DayCell","Object","assign","props","month","labelType","isSame","isSelected","isHover","circleLeft","circleRight","getCellStyle"],"mappings":"qaAsBO,MAAMA,EAAa,EACtBC,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,0BACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAeC,cAC5BjB,EACAO,EACAF,EACAC,GAEEY,GAAeH,GAAYP,EAK3BW,EAAe,KACjBT,EAASV,GAAOkB,EAAY,EA8F1BE,EAA4B,CAC9BpB,OACAC,eACAc,WACAG,cACAG,sBAAsB,EACtBX,SAAUS,EACVR,QAlGgB,KAChBA,EAAQX,EAAKsB,OAAO,eAAgBJ,EAAY,EAkGhDN,QA/FgB,KAChBA,EAAQZ,EAAKsB,OAAO,cAAc,EA+FlCC,UA9DmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACFT,GACAC,KArCgB,CAACK,IACzB,IAAII,EAEJ,MAmBMC,EAnBgD,CAClDC,UAAW,IAAM9B,EAAK+B,SAAS,EAAG,OAClCC,WAAY,IAAMhC,EAAKiC,IAAI,EAAG,OAC9BC,QAAS,IAAMlC,EAAK+B,SAAS,EAAG,OAChCI,UAAW,IAAMnC,EAAKiC,IAAI,EAAG,OAC7BG,KAAM,IAAMpC,EAAKqC,QAAQ,QACzBC,IAAK,IAAMtC,EAAKuC,MAAM,QACtBC,OAAQ,IACGhB,EAAMiB,SACPzC,EAAK+B,SAAS,EAAG,QACjB/B,EAAK+B,SAAS,EAAG,SAE3BW,SAAU,IACClB,EAAMiB,SACPzC,EAAKiC,IAAI,EAAG,QACZjC,EAAKiC,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBhB,EAAae,EAAkBN,OAAO,eAC1C,EAeAqB,CAAoBnB,EAAM,EAmD1BoB,KAAM,WACNxC,UAAWyC,EAAMzC,GACjBU,YAGJ,OAAOgC,EAACC,EAAOC,OAAAC,OAAA,CAAA,EAAK7B,EAlDC,MACjB,MAAM8B,EAAwB,CAAA,EAE1BjD,EAAakD,UAAYnD,EAAKmD,QAC9BD,EAAME,UAAY3C,EACZ,SACA,cACCoC,IAAQQ,OAAOrD,EAAM,SAAWe,IACvCmC,EAAME,UAAY,WAGtB,MAAME,EAAapD,GAAgBF,EAAKqD,OAAOnD,EAAc,OACvDqD,EAAUvD,EAAKqD,OAAOlD,EAAW,OAgBvC,OAdImD,GAAcC,GACdL,EAAME,UAAY,iBAClBF,EAAMM,WAAa,yBACnBN,EAAMO,YAAc,0BACbH,GACPJ,EAAME,UAAY,WAClBF,EAAMM,WAAa,mBACnBN,EAAMO,YAAc,oBACbF,IACPL,EAAME,UAAY,QAClBF,EAAMM,WAAa,eACnBN,EAAMO,YAAc,gBAGjBP,CAAK,EAsBqBQ,IAAkB"}

package/theme/colour-primitive/specs/spf-colour-set.js

@@ -1,2 +1,2 @@
-const r={"brand-10":"#00143A","brand-20":"#00205B","brand-30":"#153368","brand-40":"#18417C","brand-50":"#00558C","brand-60":"#009CDE","brand-70":"#5AB9E7","brand-80":"#9ED0ED","brand-90":"#CAE3F4","brand-95":"#E2F0F9","brand-100":"#F4FAFD","primary-10":"#00143A","primary-20":"#00205B","primary-30":"#153368","primary-40":"#18417C","primary-50":"#00558C","primary-60":"#009CDE","primary-70":"#5AB9E7","primary-80":"#9ED0ED","primary-90":"#CAE3F4","primary-95":"#E2F0F9","primary-100":"#F4FAFD","secondary-10":"#10171F","secondary-20":"#1E252C","secondary-30":"#2F353B","secondary-40":"#3D4247","secondary-50":"#4E5255","secondary-60":"#8F9396","secondary-70":"#A9B0B3","secondary-80":"#C7CBCC","secondary-90":"#DDDFE0","secondary-95":"#ECEDEE","secondary-100":"#F8F8F9","neutral-10":"#10171F","neutral-20":"#1E252C","neutral-30":"#2F353B","neutral-40":"#3D4247","neutral-50":"#4E5255","neutral-60":"#8F9396","neutral-70":"#A9B0B3","neutral-80":"#C7CBCC","neutral-90":"#DDDFE0","neutral-95":"#ECEDEE","neutral-100":"#F8F8F9","success-10":"#001B0E","success-20":"#012A16","success-30":"#013D20","success-40":"#014D28","success-50":"#005F30","success-60":"#48A377","success-70":"#77BD9B","success-80":"#A3D5BD","success-90":"#C4E7D6","success-95":"#DBF4E7","success-100":"#ECFDF5","warning-10":"#1F1500","warning-20":"#312100","warning-30":"#473000","warning-40":"#593C00","warning-50":"#6E4B00","warning-60":"#B78C31","warning-70":"#DDA633","warning-80":"#E0C792","warning-90":"#E9DEC5","warning-95":"#F4EEE0","warning-100":"#FAF8F3","error-10":"#360109","error-20":"#50010E","error-30":"#6F0213","error-40":"#88051A","error-50":"#A60A24","error-60":"#E07083","error-70":"#EA98A6","error-80":"#F3BBC4","error-90":"#FAD5DC","error-95":"#FEE9ED","error-100":"#FFF6F8","info-10":"#00143A","info-20":"#00205B","info-30":"#153368","info-40":"#18417C","info-50":"#00558C","info-60":"#009CDE","info-70":"#5AB9E7","info-80":"#9ED0ED","info-90":"#CAE3F4","info-95":"#E2F0F9","info-100":"#F4FAFD",white:"#FFFFFF",black:"#000000","primary-inverse":"#FFCB6A"};export{r as SPFColourSet};
+const r={"brand-10":"#00205B","brand-20":"#143168","brand-30":"#274374","brand-40":"#3C5481","brand-50":"#4E648D","brand-60":"#8493B0","brand-70":"#B6BFD0","brand-80":"#CCD2DE","brand-90":"#DEE2EA","brand-95":"#EBEEF2","brand-100":"#F8F9FB","primary-10":"#00263F","primary-20":"#00365A","primary-30":"#004674","primary-40":"#00558C","primary-50":"#0069A4","primary-60":"#009CDE","primary-70":"#73C9ED","primary-80":"#A1DBF3","primary-90":"#C1E7F7","primary-95":"#DCF1FA","primary-100":"#F3FAFD","secondary-10":"#27241D","secondary-20":"#38332A","secondary-30":"#494337","secondary-40":"#5B5343","secondary-50":"#6C6350","secondary-60":"#9E9175","secondary-70":"#CEBD99","secondary-80":"#DDCBA4","secondary-90":"#EAE0C8","secondary-95":"#F4EEE0","secondary-100":"#FAF8F3","neutral-10":"#262627","neutral-20":"#323435","neutral-30":"#414446","neutral-40":"#54585A","neutral-50":"#616566","neutral-60":"#909294","neutral-70":"#BDBEBF","neutral-80":"#D1D2D2","neutral-90":"#E1E2E3","neutral-95":"#EDEDED","neutral-100":"#F8F8F8","success-10":"#052A16","success-20":"#073C1F","success-30":"#094D28","success-40":"#0F6134","success-50":"#14733E","success-60":"#22A55A","success-70":"#86CEA4","success-80":"#ACDDC1","success-90":"#CAE9D7","success-95":"#DFF2E7","success-100":"#F2FAF5","warning-10":"#302204","warning-20":"#453005","warning-30":"#593F07","warning-40":"#6F4F08","warning-50":"#845D0A","warning-60":"#BD891B","warning-70":"#F1B434","warning-80":"#F6CC76","warning-90":"#F9DFA7","warning-95":"#FCEDCE","warning-100":"#FEF9EF","error-10":"#4D0612","error-20":"#6B0919","error-30":"#890B20","error-40":"#A90E27","error-50":"#C8102E","error-60":"#DE7082","error-70":"#ECAEB8","error-80":"#F2C8CF","error-90":"#F7DBDF","error-95":"#FAEBED","error-100":"#FDF8F9","info-10":"#330072","info-20":"#45177E","info-30":"#572C8B","info-40":"#674196","info-50":"#7654A1","info-60":"#A088BD","info-70":"#C7B9D8","info-80":"#D7CEE4","info-90":"#E5DEED","info-95":"#F1EDF5","info-100":"#FAF8FB",white:"#FFFFFF",black:"#000000","primary-inverse":"#6FC7EC"};export{r as SPFColourSet};
 //# sourceMappingURL=spf-colour-set.js.map

package/theme/colour-primitive/specs/spf-colour-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"spf-colour-set.js","sources":["../../../../src/theme/colour-primitive/specs/spf-colour-set.ts"],"sourcesContent":["import { PrimitiveColourSet } from \"../../types\";\n\nexport const SPFColourSet: PrimitiveColourSet = {\n    \"brand-10\": \"#00143A\",\n    \"brand-20\": \"#00205B\",\n    \"brand-30\": \"#153368\",\n    \"brand-40\": \"#18417C\",\n    \"brand-50\": \"#00558C\",\n    \"brand-60\": \"#009CDE\",\n    \"brand-70\": \"#5AB9E7\",\n    \"brand-80\": \"#9ED0ED\",\n    \"brand-90\": \"#CAE3F4\",\n    \"brand-95\": \"#E2F0F9\",\n    \"brand-100\": \"#F4FAFD\",\n    \"primary-10\": \"#00143A\",\n    \"primary-20\": \"#00205B\",\n    \"primary-30\": \"#153368\",\n    \"primary-40\": \"#18417C\",\n    \"primary-50\": \"#00558C\",\n    \"primary-60\": \"#009CDE\",\n    \"primary-70\": \"#5AB9E7\",\n    \"primary-80\": \"#9ED0ED\",\n    \"primary-90\": \"#CAE3F4\",\n    \"primary-95\": \"#E2F0F9\",\n    \"primary-100\": \"#F4FAFD\",\n    \"secondary-10\": \"#10171F\",\n    \"secondary-20\": \"#1E252C\",\n    \"secondary-30\": \"#2F353B\",\n    \"secondary-40\": \"#3D4247\",\n    \"secondary-50\": \"#4E5255\",\n    \"secondary-60\": \"#8F9396\",\n    \"secondary-70\": \"#A9B0B3\",\n    \"secondary-80\": \"#C7CBCC\",\n    \"secondary-90\": \"#DDDFE0\",\n    \"secondary-95\": \"#ECEDEE\",\n    \"secondary-100\": \"#F8F8F9\",\n    \"neutral-10\": \"#10171F\",\n    \"neutral-20\": \"#1E252C\",\n    \"neutral-30\": \"#2F353B\",\n    \"neutral-40\": \"#3D4247\",\n    \"neutral-50\": \"#4E5255\",\n    \"neutral-60\": \"#8F9396\",\n    \"neutral-70\": \"#A9B0B3\",\n    \"neutral-80\": \"#C7CBCC\",\n    \"neutral-90\": \"#DDDFE0\",\n    \"neutral-95\": \"#ECEDEE\",\n    \"neutral-100\": \"#F8F8F9\",\n    \"success-10\": \"#001B0E\",\n    \"success-20\": \"#012A16\",\n    \"success-30\": \"#013D20\",\n    \"success-40\": \"#014D28\",\n    \"success-50\": \"#005F30\",\n    \"success-60\": \"#48A377\",\n    \"success-70\": \"#77BD9B\",\n    \"success-80\": \"#A3D5BD\",\n    \"success-90\": \"#C4E7D6\",\n    \"success-95\": \"#DBF4E7\",\n    \"success-100\": \"#ECFDF5\",\n    \"warning-10\": \"#1F1500\",\n    \"warning-20\": \"#312100\",\n    \"warning-30\": \"#473000\",\n    \"warning-40\": \"#593C00\",\n    \"warning-50\": \"#6E4B00\",\n    \"warning-60\": \"#B78C31\",\n    \"warning-70\": \"#DDA633\",\n    \"warning-80\": \"#E0C792\",\n    \"warning-90\": \"#E9DEC5\",\n    \"warning-95\": \"#F4EEE0\",\n    \"warning-100\": \"#FAF8F3\",\n    \"error-10\": \"#360109\",\n    \"error-20\": \"#50010E\",\n    \"error-30\": \"#6F0213\",\n    \"error-40\": \"#88051A\",\n    \"error-50\": \"#A60A24\",\n    \"error-60\": \"#E07083\",\n    \"error-70\": \"#EA98A6\",\n    \"error-80\": \"#F3BBC4\",\n    \"error-90\": \"#FAD5DC\",\n    \"error-95\": \"#FEE9ED\",\n    \"error-100\": \"#FFF6F8\",\n    \"info-10\": \"#00143A\",\n    \"info-20\": \"#00205B\",\n    \"info-30\": \"#153368\",\n    \"info-40\": \"#18417C\",\n    \"info-50\": \"#00558C\",\n    \"info-60\": \"#009CDE\",\n    \"info-70\": \"#5AB9E7\",\n    \"info-80\": \"#9ED0ED\",\n    \"info-90\": \"#CAE3F4\",\n    \"info-95\": \"#E2F0F9\",\n    \"info-100\": \"#F4FAFD\",\n    white: \"#FFFFFF\",\n    black: \"#000000\",\n    \"primary-inverse\": \"#FFCB6A\",\n};\n"],"names":["SPFColourSet","white","black"],"mappings":"AAEO,MAAMA,EAAmC,CAC5C,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,YAAa,UACb,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UACf,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,gBAAiB,UACjB,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UACf,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UACf,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UACf,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,YAAa,UACb,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,WAAY,UACZC,MAAO,UACPC,MAAO,UACP,kBAAmB"}
+{"version":3,"file":"spf-colour-set.js","sources":["../../../../src/theme/colour-primitive/specs/spf-colour-set.ts"],"sourcesContent":["import { PrimitiveColourSet } from \"../../types\";\n\nexport const SPFColourSet: PrimitiveColourSet = {\n    \"brand-10\": \"#00205B\",\n    \"brand-20\": \"#143168\",\n    \"brand-30\": \"#274374\",\n    \"brand-40\": \"#3C5481\",\n    \"brand-50\": \"#4E648D\",\n    \"brand-60\": \"#8493B0\",\n    \"brand-70\": \"#B6BFD0\",\n    \"brand-80\": \"#CCD2DE\",\n    \"brand-90\": \"#DEE2EA\",\n    \"brand-95\": \"#EBEEF2\",\n    \"brand-100\": \"#F8F9FB\",\n    \"primary-10\": \"#00263F\",\n    \"primary-20\": \"#00365A\",\n    \"primary-30\": \"#004674\",\n    \"primary-40\": \"#00558C\",\n    \"primary-50\": \"#0069A4\",\n    \"primary-60\": \"#009CDE\",\n    \"primary-70\": \"#73C9ED\",\n    \"primary-80\": \"#A1DBF3\",\n    \"primary-90\": \"#C1E7F7\",\n    \"primary-95\": \"#DCF1FA\",\n    \"primary-100\": \"#F3FAFD\",\n    \"secondary-10\": \"#27241D\",\n    \"secondary-20\": \"#38332A\",\n    \"secondary-30\": \"#494337\",\n    \"secondary-40\": \"#5B5343\",\n    \"secondary-50\": \"#6C6350\",\n    \"secondary-60\": \"#9E9175\",\n    \"secondary-70\": \"#CEBD99\",\n    \"secondary-80\": \"#DDCBA4\",\n    \"secondary-90\": \"#EAE0C8\",\n    \"secondary-95\": \"#F4EEE0\",\n    \"secondary-100\": \"#FAF8F3\",\n    \"neutral-10\": \"#262627\",\n    \"neutral-20\": \"#323435\",\n    \"neutral-30\": \"#414446\",\n    \"neutral-40\": \"#54585A\",\n    \"neutral-50\": \"#616566\",\n    \"neutral-60\": \"#909294\",\n    \"neutral-70\": \"#BDBEBF\",\n    \"neutral-80\": \"#D1D2D2\",\n    \"neutral-90\": \"#E1E2E3\",\n    \"neutral-95\": \"#EDEDED\",\n    \"neutral-100\": \"#F8F8F8\",\n    \"success-10\": \"#052A16\",\n    \"success-20\": \"#073C1F\",\n    \"success-30\": \"#094D28\",\n    \"success-40\": \"#0F6134\",\n    \"success-50\": \"#14733E\",\n    \"success-60\": \"#22A55A\",\n    \"success-70\": \"#86CEA4\",\n    \"success-80\": \"#ACDDC1\",\n    \"success-90\": \"#CAE9D7\",\n    \"success-95\": \"#DFF2E7\",\n    \"success-100\": \"#F2FAF5\",\n    \"warning-10\": \"#302204\",\n    \"warning-20\": \"#453005\",\n    \"warning-30\": \"#593F07\",\n    \"warning-40\": \"#6F4F08\",\n    \"warning-50\": \"#845D0A\",\n    \"warning-60\": \"#BD891B\",\n    \"warning-70\": \"#F1B434\",\n    \"warning-80\": \"#F6CC76\",\n    \"warning-90\": \"#F9DFA7\",\n    \"warning-95\": \"#FCEDCE\",\n    \"warning-100\": \"#FEF9EF\",\n    \"error-10\": \"#4D0612\",\n    \"error-20\": \"#6B0919\",\n    \"error-30\": \"#890B20\",\n    \"error-40\": \"#A90E27\",\n    \"error-50\": \"#C8102E\",\n    \"error-60\": \"#DE7082\",\n    \"error-70\": \"#ECAEB8\",\n    \"error-80\": \"#F2C8CF\",\n    \"error-90\": \"#F7DBDF\",\n    \"error-95\": \"#FAEBED\",\n    \"error-100\": \"#FDF8F9\",\n    \"info-10\": \"#330072\",\n    \"info-20\": \"#45177E\",\n    \"info-30\": \"#572C8B\",\n    \"info-40\": \"#674196\",\n    \"info-50\": \"#7654A1\",\n    \"info-60\": \"#A088BD\",\n    \"info-70\": \"#C7B9D8\",\n    \"info-80\": \"#D7CEE4\",\n    \"info-90\": \"#E5DEED\",\n    \"info-95\": \"#F1EDF5\",\n    \"info-100\": \"#FAF8FB\",\n    white: \"#FFFFFF\",\n    black: \"#000000\",\n    \"primary-inverse\": \"#6FC7EC\",\n};\n"],"names":["SPFColourSet","white","black"],"mappings":"AAEO,MAAMA,EAAmC,CAC5C,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,YAAa,UACb,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UACf,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,gBAAiB,UACjB,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UACf,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UACf,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UACf,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,YAAa,UACb,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,WAAY,UACZC,MAAO,UACPC,MAAO,UACP,kBAAmB"}