@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.11

package/cjs/timetable/timetable.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable.js","sources":["../../../src/timetable/timetable.tsx"],"sourcesContent":["import { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { PopoverV2TriggerProps } from \"../popover-v2\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport {\n    ClickableRowHeaderTitle,\n    ColumnHeader,\n    ColumnHeaderRow,\n    ColumnHeaderTitle,\n    Container,\n    ContentContainer,\n    EmptyTableContainer,\n    Loader,\n    LoadingBar,\n    LoadingCell,\n    LoadingWrapper,\n    NoResultsFound,\n    RowColumnHeader,\n    RowHeader,\n    RowHeaderColumn,\n    RowHeaderSubtitle,\n    StyledPopoverTrigger,\n    TimeTableContainer,\n} from \"./timetable.style\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverV2TriggerProps = {\n            position: \"bottom-start\",\n            rootNode: tableContainerRef,\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <StyledPopoverTrigger\n                {...popoverTriggerProps}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </StyledPopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const ConditionalCellWrapper = ({\n        wrapper,\n        children,\n    }: {\n        wrapper: (child: JSX.Element) => JSX.Element;\n        children: JSX.Element;\n    }) => {\n        return wrapper(children);\n    };\n\n    const renderRowHeaderColumn = () => {\n        return (\n            <>\n                {rowData.map((data, index) => {\n                    return (\n                        <ConditionalCellWrapper\n                            key={index}\n                            wrapper={(child: JSX.Element) =>\n                                buildPopoverTrigger(data, child)\n                            }\n                        >\n                            <RowHeader\n                                $isScrolled={isScrolledX}\n                                key={`${data.id}-row-header`}\n                            >\n                                <ClickableRowHeaderTitle\n                                    $isClickable={!!data.onRowNameClick}\n                                    onClick={(event: React.MouseEvent) =>\n                                        handleRowNameClick(data, event)\n                                    }\n                                    weight=\"semibold\"\n                                    data-testid={`${data.id}-row-header-title`}\n                                >\n                                    {data.name}\n                                </ClickableRowHeaderTitle>\n\n                                <RowHeaderSubtitle\n                                    weight=\"bold\"\n                                    $show={!!data.subtitle}\n                                    data-testid={`${data.id}-row-header-subtitle`}\n                                >\n                                    {data.subtitle}\n                                </RowHeaderSubtitle>\n                            </RowHeader>\n                        </ConditionalCellWrapper>\n                    );\n                })}\n                {renderRowHeaderColumnLazyLoad()}\n            </>\n        );\n    };\n\n    const renderRowHeaderColumnLazyLoad = () => {\n        if (loading || !loadMore) return;\n        return (\n            <RowHeader $isScrolled={isScrolledX}>\n                <LoadingBar />\n            </RowHeader>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n        return hourlyIntervals.map((columnHeader: string) => {\n            return (\n                <ColumnHeader\n                    key={`${columnHeader}-column-key`}\n                    data-testid={`${columnHeader}-column`}\n                >\n                    <ColumnHeaderTitle weight={\"semibold\"}>\n                        {columnHeader}\n                    </ColumnHeaderTitle>\n                </ColumnHeader>\n            );\n        });\n    };\n\n    const renderRowBarData = () => {\n        if (loading) return <Loader $isEmptyContent={isEmptyContent} />;\n        return (\n            <ContentContainer\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                $numOfRows={rowData.length}\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <RowBar\n                            key={`${index}-row-bar`}\n                            timetableMinTime={timetableMinTime}\n                            timetableMaxTime={timetableMaxTime}\n                            rowBarColor={getColorFromSequence()}\n                            intervalWidth={intervalWidth}\n                            containerRef={contentContainerRef}\n                            {...data}\n                        />\n                    );\n                })}\n                {renderRowDataLazyLoad()}\n            </ContentContainer>\n        );\n    };\n\n    const renderRowDataLazyLoad = () => {\n        if (loading || !loadMore) return;\n        return (\n            <LoadingWrapper data-testid=\"lazy-loader\">\n                {hourlyIntervals.map((_, index) => (\n                    <LoadingCell\n                        key={`lazy-load-cell-${index}`}\n                        $width={intervalWidth * 4}\n                    >\n                        <LoadingBar />\n                    </LoadingCell>\n                ))}\n            </LoadingWrapper>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <EmptyTableContainer className=\"empty-container\">\n                    {!loading ? (\n                        <NoResultsFound\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <Loader $isEmptyContent={isEmptyContent}></Loader>\n                    )}\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n\n    return (\n        <Container {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <TimeTableContainer\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                $loading={loading}\n                $allRecordsLoaded={allRecordsLoaded || !onPage}\n            >\n                <RowColumnHeader\n                    $isScrolledY={isScrolledY}\n                    $isScrolledX={isScrolledX}\n                ></RowColumnHeader>\n                <RowHeaderColumn\n                    $numOfRows={rowData.length}\n                    $isScrolled={isScrolledX}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    {renderRowHeaderColumn()}\n                </RowHeaderColumn>\n                <ColumnHeaderRow\n                    $numOfColumns={hourlyIntervals.length}\n                    $isScrolled={isScrolledY}\n                >\n                    {renderColumnHeaders()}\n                </ColumnHeaderRow>\n                {renderRowBarData()}\n            </TimeTableContainer>\n        </Container>\n    );\n};\n\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","isEmptyContent","isEmpty","allRecordsLoaded","length","tableContainerRef","useRef","contentContainerRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","Math","ceil","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","ROW_INTERVAL","calcWidth","clientWidth","ROW_HEADER_WIDTH","width","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","ConditionalCellWrapper","wrapper","children","renderRowHeaderColumnLazyLoad","_jsx","RowHeader","$isScrolled","LoadingBar","renderRowDataLazyLoad","LoadingWrapper","map","_","index","LoadingCell","_jsxs","Container","Object","assign","TimeTableHeader","selectedDate","EmptyTableContainer","className","Loader","$isEmptyContent","NoResultsFound","type","description","TimeTableContainer","$loading","$allRecordsLoaded","RowColumnHeader","$isScrolledY","$isScrolledX","RowHeaderColumn","$numOfRows","_Fragment","data","child","rowHeaderPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_createElement","StyledPopoverTrigger","key","id","zIndex","buildPopoverTrigger","ClickableRowHeaderTitle","onRowNameClick","onClick","event","handleRowNameClick","weight","name","RowHeaderSubtitle","$show","subtitle","ColumnHeaderRow","$numOfColumns","columnHeader","ColumnHeader","ColumnHeaderTitle","ContentContainer","RowBar","rowBarColor","containerRef"],"mappings":"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"}
+{"version":3,"file":"timetable.js","sources":["../../../src/timetable/timetable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport type { PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport * as styles from \"./timetable.styles\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const hasLazyLoad = !allRecordsLoaded && !!onPage;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const columnHeaderRowRef = useRef<HTMLDivElement>(null);\n    const loadingWrapperRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    useApplyStyle(columnHeaderRowRef, {\n        [styles.tokens.columnHeaderRow.columnWidth]: `${intervalWidth * 4}px`,\n    });\n\n    useApplyStyle(loadingWrapperRef, {\n        [styles.tokens.loadingWrapper.cellWidth]: `${intervalWidth * 4}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverTriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <PopoverTrigger\n                {...popoverTriggerProps}\n                className={styles.popoverTrigger}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </PopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <Typography.BodyMD\n                    className={clsx(\n                        styles.clickableRowHeaderTitle,\n                        !!data.onRowNameClick &&\n                            styles.clickableRowHeaderTitleClickable\n                    )}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </Typography.BodyMD>\n\n                <Typography.BodyXS\n                    weight=\"bold\"\n                    className={clsx(\n                        styles.rowHeaderSubtitle,\n                        !data.subtitle && styles.rowHeaderSubtitleHidden\n                    )}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </Typography.BodyXS>\n            </>\n        );\n\n        return (\n            <div\n                className={clsx(\n                    styles.rowHeader,\n                    isScrolledX && styles.rowHeaderScrolled\n                )}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </div>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <div\n                className={styles.columnHeader}\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <Typography.BodySM\n                    className={styles.columnHeaderTitle}\n                    weight={\"semibold\"}\n                >\n                    {columnHeader}\n                </Typography.BodySM>\n            </div>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) {\n            return (\n                <LoadingDotsSpinner\n                    data-testid=\"timetable-loading-spinner\"\n                    className={clsx(\n                        styles.loadingSpinner,\n                        isEmptyContent\n                            ? styles.loadingSpinnerEmptyContent\n                            : styles.loadingSpinnerHasContent\n                    )}\n                />\n            );\n        }\n\n        return (\n            <div\n                className={styles.timeTableBody}\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <div\n                            className={styles.timeTableRow}\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </div>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </div>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <div className={styles.timeTableRow}>\n                <div\n                    className={clsx(\n                        styles.rowHeader,\n                        isScrolledX && styles.rowHeaderScrolled\n                    )}\n                >\n                    <div className={styles.loadingBar} />\n                </div>\n                <div\n                    ref={loadingWrapperRef}\n                    className={styles.loadingWrapper}\n                    data-testid=\"lazy-loader\"\n                    role=\"presentation\"\n                >\n                    {hourlyIntervals.map((_, index) => (\n                        <div\n                            className={styles.loadingCell}\n                            key={`lazy-load-cell-${index}`}\n                        >\n                            <div className={styles.loadingBar} />\n                        </div>\n                    ))}\n                </div>\n            </div>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <div {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <div\n                    className={clsx(\n                        styles.emptyTableContainer,\n                        \"empty-container\"\n                    )}\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <ErrorDisplay\n                            className={styles.noResultsFound}\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <LoadingDotsSpinner\n                                data-testid=\"timetable-loading-spinner\"\n                                className={clsx(\n                                    styles.loadingSpinner,\n                                    isEmptyContent\n                                        ? styles.loadingSpinnerEmptyContent\n                                        : styles.loadingSpinnerHasContent\n                                )}\n                            />\n                        </>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <div\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                className={clsx(\n                    styles.timeTableContainer,\n                    hasLazyLoad && styles.timeTableContainerNotAllLoaded,\n                    loading && styles.timeTableContainerLoading\n                )}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <div\n                    className={styles.timeTableHeaderRow}\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.rowColumnHeader,\n                            (isScrolledX || isScrolledY) &&\n                                styles.rowColumnHeaderScrolled,\n                            isScrolledX && styles.rowColumnHeaderScrolledX,\n                            isScrolledY && styles.rowColumnHeaderScrolledY\n                        )}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </div>\n                    <div\n                        ref={columnHeaderRowRef}\n                        className={clsx(\n                            styles.columnHeaderRow,\n                            isScrolledY && styles.columnHeaderRowScrolled\n                        )}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </div>\n                </div>\n                {renderRows()}\n            </div>\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A scrollable grid that visualises time slot availability across a day.\n *\n * Use `TimeTable` to display one day's schedule for multiple resources side by\n * side.\n * @keywords availability, grid, schedule\n */\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","hasLazyLoad","tableContainerRef","useRef","contentContainerRef","columnHeaderRowRef","loadingWrapperRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useApplyStyle","styles.tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","width","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","PopoverTrigger","Object","assign","className","styles.popoverTrigger","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","Typography","BodyMD","clsx","styles.clickableRowHeaderTitle","onRowNameClick","styles.clickableRowHeaderTitleClickable","onClick","event","handleRowNameClick","weight","name","BodyXS","styles.rowHeaderSubtitle","subtitle","styles.rowHeaderSubtitleHidden","styles.rowHeader","styles.rowHeaderScrolled","role","renderLazyLoadRow","styles.timeTableRow","styles.loadingBar","styles.loadingWrapper","map","_","index","styles.loadingCell","TimeTableHeader","selectedDate","styles.emptyTableContainer","tabIndex","VisuallyHidden","LoadingDotsSpinner","styles.loadingSpinner","styles.loadingSpinnerEmptyContent","styles.loadingSpinnerHasContent","ErrorDisplay","styles.noResultsFound","type","description","styles.timeTableContainer","styles.timeTableContainerNotAllLoaded","styles.timeTableContainerLoading","styles.timeTableHeaderRow","styles.rowColumnHeader","styles.rowColumnHeaderScrolled","styles.rowColumnHeaderScrolledX","styles.rowColumnHeaderScrolledY","styles.columnHeaderRow","styles.columnHeaderRowScrolled","columnHeader","styles.columnHeader","BodySM","styles.columnHeaderTitle","styles.timeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"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"}

package/cjs/timetable/timetable.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./timetable.styles_7rp8kz.css");exports.clickableRowHeaderTitle="c1wixfzv",exports.clickableRowHeaderTitleClickable="c1ydv4q1",exports.columnHeader="cu00ucx",exports.columnHeaderRow="club8pr",exports.columnHeaderRowScrolled="c1ww0xmb",exports.columnHeaderTitle="c78q521",exports.emptyTableContainer="erxhy6s",exports.loadingBar="lwaowax",exports.loadingCell="l1gsk7y7",exports.loadingSpinner="lywjuzz",exports.loadingSpinnerEmptyContent="l1x75bdd",exports.loadingSpinnerHasContent="l1c8n8nw",exports.loadingWrapper="l5bp49u",exports.noResultsFound="n1c42c7o",exports.popoverTrigger="p1l2dqit",exports.rowColumnHeader="rlj7vfj",exports.rowColumnHeaderScrolled="r1wcbob7",exports.rowColumnHeaderScrolledX="rwd1dpu",exports.rowColumnHeaderScrolledY="r14gjl6n",exports.rowHeader="r1bl65p4",exports.rowHeaderScrolled="r18q97gy",exports.rowHeaderSubtitle="r1g67qip",exports.rowHeaderSubtitleHidden="rr9vcmw",exports.timeTableBody="t12ob72k",exports.timeTableContainer="t1e3v70i",exports.timeTableContainerLoading="t1gzwlj3",exports.timeTableContainerNotAllLoaded="t1rmyx7n",exports.timeTableHeaderRow="tvbecqk",exports.timeTableRow="tcjynx9",exports.tokens={columnHeaderRow:{columnWidth:"--fds-internal-timetable-columnHeaderRow-columnWidth"},loadingWrapper:{cellWidth:"--fds-internal-timetable-loadingWrapper-cellWidth"}};
+//# sourceMappingURL=timetable.styles.js.map

package/cjs/timetable/timetable.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable.styles.js","sources":["../../../src/timetable/timetable.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow, Spacing } from \"../theme\";\nimport {\n    MIN_HOURLY_INTERVAL_WIDTH,\n    ROW_HEADER_WIDTH,\n    ROW_HEIGHT,\n} from \"./const\";\n\nexport const tokens = {\n    rowColumnHeader: {\n        clipRight: \"--fds-internal-timetable-rowColumnHeader-clipRight\",\n        clipBottom: \"--fds-internal-timetable-rowColumnHeader-clipBottom\",\n    },\n    columnHeaderRow: {\n        columnWidth: \"--fds-internal-timetable-columnHeaderRow-columnWidth\",\n    },\n    loadingWrapper: {\n        cellWidth: \"--fds-internal-timetable-loadingWrapper-cellWidth\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// TABLE\n// -----------------------------------------------------------------------------\n\nexport const emptyTableContainer = css`\n    display: grid;\n    overflow: scroll;\n    position: relative;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const timeTableContainer = css`\n    display: grid;\n    align-content: start;\n    overflow: scroll;\n    position: relative;\n    isolation: isolate;\n`;\n\nexport const timeTableContainerNotAllLoaded = css`\n    padding-bottom: 128px;\n`;\n\nexport const timeTableContainerLoading = css`\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE HEADER\n// -----------------------------------------------------------------------------\n\nexport const rowColumnHeader = css`\n    ${tokens.rowColumnHeader.clipRight}: 0;\n    ${tokens.rowColumnHeader.clipBottom}: 0;\n\n    position: sticky;\n    top: 0;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    z-index: 2;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    box-shadow: none;\n    clip-path: inset(0);\n    transition: box-shadow 0.5s ease-in-out, clip-path 0.5s ease-in-out;\n`;\n\nexport const rowColumnHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(\n        0 var(${tokens.rowColumnHeader.clipRight})\n            var(${tokens.rowColumnHeader.clipBottom}) 0\n    );\n`;\n\nexport const rowColumnHeaderScrolledX = css`\n    ${tokens.rowColumnHeader.clipRight}: -0.12px;\n`;\n\nexport const rowColumnHeaderScrolledY = css`\n    ${tokens.rowColumnHeader.clipBottom}: -0.12px;\n`;\n\nexport const timeTableHeaderRow = css`\n    display: grid;\n    position: sticky;\n    top: 0;\n    z-index: 4;\n    background-color: ${Colour[\"bg\"]};\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const columnHeaderRow = css`\n    display: grid;\n    background-color: ${Colour[\"bg\"]};\n    height: ${ROW_HEIGHT}px;\n    grid-auto-flow: column;\n    grid-auto-columns: max(\n        var(${tokens.columnHeaderRow.columnWidth}),\n        ${MIN_HOURLY_INTERVAL_WIDTH}px\n    );\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const columnHeaderRowScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const columnHeader = css`\n    min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const columnHeaderTitle = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE BODY\n// -----------------------------------------------------------------------------\n\nexport const timeTableBody = css`\n    width: max-content;\n    min-width: 100%;\n`;\n\nexport const timeTableRow = css`\n    display: grid;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const rowHeader = css`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;\n    position: sticky;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    z-index: 3;\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    text-align: right;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-32\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    border-left: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const rowHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n\nexport const clickableRowHeaderTitle = css`\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n    white-space: nowrap;\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const clickableRowHeaderTitleClickable = css`\n    &:hover {\n        cursor: pointer;\n    }\n`;\n\nexport const rowHeaderSubtitle = css`\n    display: inline-flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    align-items: center;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const rowHeaderSubtitleHidden = css`\n    display: none;\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING AND ERROR\n// -----------------------------------------------------------------------------\n\nexport const loadingSpinner = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const loadingSpinnerEmptyContent = css`\n    grid-column: 1 / -1;\n`;\n\nexport const loadingSpinnerHasContent = css`\n    grid-column: 2 / -1;\n`;\n\nexport const noResultsFound = css`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${Spacing[\"spacing-72\"]} 0;\n`;\n\n// -----------------------------------------------------------------------------\n// LAZY LOADING\n// -----------------------------------------------------------------------------\n\nexport const loadingWrapper = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.loadingWrapper.cellWidth}: initial;\n\n    display: flex;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const loadingCell = css`\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    width: var(${tokens.loadingWrapper.cellWidth});\n    height: 100%;\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-12\"]};\n`;\n\nexport const loadingBar = css`\n    @keyframes timetable-loading-gradient {\n        0% {\n            background-position: -468px 0;\n        }\n        100% {\n            background-position: 468px 0;\n        }\n    }\n\n    height: 28px;\n    width: 100%;\n    background: linear-gradient(\n        to right,\n        ${Colour.Primitive[\"neutral-95\"]} 8%,\n        ${Colour.Primitive[\"neutral-100\"]} 18%,\n        ${Colour.Primitive[\"neutral-95\"]} 33%\n    );\n    background-size: 800px 104px;\n    animation: timetable-loading-gradient 1.5s forwards infinite;\n`;\n\n// -----------------------------------------------------------------------------\n// MISCELLANEOUS\n// -----------------------------------------------------------------------------\n\nexport const popoverTrigger = css`\n    max-width: 24rem !important;\n    &:hover {\n        cursor: default;\n    }\n`;\n"],"names":["columnHeaderRow","columnWidth","loadingWrapper","cellWidth"],"mappings":"+GA0KoC,oDASS,gCA9DpB,kCAjBG,0CAaQ,qCAWN,sCAlGE,6BAyNT,8BARC,kCAnCG,6CASY,4CAIF,kCAcV,iCAVA,kCAoDA,mCAtNC,0CAiBQ,4CAQC,2CAIA,6BA6Df,qCAoBQ,qCAoBA,2CAOM,gCA5DV,sCAnGK,6CAYO,kDAJK,sCA+CZ,+BAiDN,yBAhIH,CAKlBA,gBAAiB,CACbC,YAAa,wDAEjBC,eAAgB,CACZC,UAAW"}

package/cjs/timetable/timetable.styles_7rp8kz.css

@@ -0,0 +1,46 @@
+@layer fds{.erxhy6s{display:-ms-grid;display:grid;overflow:scroll;position:relative;-ms-grid-columns:252px auto;grid-template-columns:252px auto;}
+.t1e3v70i{display:-ms-grid;display:grid;-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;overflow:scroll;position:relative;isolation:isolate;}
+.t1rmyx7n{padding-bottom:128px;}
+.t1gzwlj3:hover{cursor:not-allowed;}
+.rlj7vfj{--fds-internal-timetable-rowColumnHeader-clipRight:0;--fds-internal-timetable-rowColumnHeader-clipBottom:0;position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--fds-colour-bg);width:252px;height:68px;z-index:2;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);box-shadow:none;-webkit-clip-path:inset(0);clip-path:inset(0);-webkit-transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;}
+.r1wcbob7{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );}
+.rwd1dpu{--fds-internal-timetable-rowColumnHeader-clipRight:-0.12px;}
+.r14gjl6n{--fds-internal-timetable-rowColumnHeader-clipBottom:-0.12px;}
+.tvbecqk{display:-ms-grid;display:grid;position:-webkit-sticky;position:sticky;top:0;z-index:4;background-color:var(--fds-colour-bg);-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.club8pr{display:-ms-grid;display:grid;background-color:var(--fds-colour-bg);height:68px;-ms-grid-auto-flow:column;grid-auto-flow:column;-ms-grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.c1ww0xmb{box-shadow:var(--fds-shadow-md-subtle);}
+.cu00ucx{min-width:84px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding-bottom:var(--fds-spacing-4);}
+.c78q521{color:var(--fds-colour-text-subtler);}
+.t12ob72k{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;}
+.tcjynx9{display:-ms-grid;display:grid;-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.r1bl65p4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:-webkit-sticky;position:sticky;left:0;background-color:var(--fds-colour-bg);z-index:3;width:252px;height:68px;text-align:right;padding:0 var(--fds-spacing-16) 0 var(--fds-spacing-32);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.r18q97gy{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(0 -6px 0 0);clip-path:inset(0 -6px 0 0);}
+.c1wixfzv{display:inline-block;text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;color:var(--fds-colour-text-primary);}
+.c1ydv4q1:hover{cursor:pointer;}
+.r1g67qip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;gap:var(--fds-spacing-4);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text-subtler);}
+.rr9vcmw{display:none;}
+.lywjuzz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-ms-grid-row:2;grid-row:2;width:100%;height:100%;}
+.l1x75bdd{-ms-grid-column:1/-1;grid-column:1/-1;}
+.l1c8n8nw{-ms-grid-column:2/-1;grid-column:2/-1;}
+.n1c42c7o{-ms-grid-column:1/-1;grid-column:1/-1;-ms-grid-row:2;grid-row:2;padding:var(--fds-spacing-72) 0;}
+.l5bp49u{--fds-internal-timetable-loadingWrapper-cellWidth:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.l1gsk7y7{border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);width:var(--fds-internal-timetable-loadingWrapper-cellWidth);height:100%;padding:var(--fds-spacing-20) var(--fds-spacing-12);}
+.lwaowax{height:28px;width:100%;background:linear-gradient(
+        to right,
+        var(--fds-colour-neutral-95) 8%,
+        var(--fds-colour-neutral-100) 18%,
+        var(--fds-colour-neutral-95) 33%
+    );-webkit-background-size:800px 104px;background-size:800px 104px;-webkit-animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;}@-webkit-keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}@keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}
+.p1l2dqit{max-width:24rem!important;}.p1l2dqit:hover{cursor:default;}}

package/cjs/toast/toast.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),s=require("@react-spring/web"),n=require("react"),r=require("../external/react-responsive/dist/react-responsive.js"),a=require("styled-components"),l=require("../shared/accessibility/index.js"),o=require("../v3_theme/index.js"),c=require("./toast.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(n);const p=4e3,x={success:i.TickCircleFillIcon,warning:i.ExclamationTriangleFillIcon,error:i.ExclamationCircleFillIcon,info:i.ICircleFillIcon};exports.Toast=u=>{var{type:m="success",title:f,label:y,autoDismiss:j,autoDismissTime:h=p,onDismiss:v,fixed:C=!0,actionButton:E}=u,T=e.__rest(u,["type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const g=n.useRef(null),[q,D]=n.useState(!1),b=n.useContext(a.ThemeContext),k=o.V3_Breakpoint["lg-max"]({theme:b}),I=r.reactResponsiveExports.useMediaQuery({maxWidth:k});n.useEffect((()=>{D(!0)}),[]),n.useEffect((()=>{if(!j)return;const e=setTimeout((()=>{D(!1)}),h);return()=>clearTimeout(e)}),[j]),n.useEffect((()=>{const e=e=>{var t;"Escape"===e.key&&(null===(t=g.current)||void 0===t?void 0:t.contains(document.activeElement))&&$()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const $=()=>{D(!1)},B=s.useSpring({opacity:q?1:0,transform:q?I?"translateY(0%)":"translateX(0%)":I?"translateY(-1500%)":"translateX(150%)",config:{easing:s.easings.easeInOutQuart,duration:1e3},onRest:()=>{q||null==v||v()}});return t.jsxs(c.Wrapper,Object.assign({ref:g,style:B,$type:m,$fixed:C,role:"alert",inert:l.inertValue(!q)},T,{children:[t.jsx(l.VisuallyHidden,{children:m}),t.jsxs(c.ContentWrapper,{children:[t.jsxs(c.TextIconWrapper,{$type:m,children:[(()=>{const e=x[m];return e&&t.jsx(e,{"aria-hidden":!0})})(),t.jsxs(c.TextContainer,{children:[f&&(d.default.isValidElement(f)?f:t.jsx(c.Title,{$type:m,role:"presentation",children:f})),y&&(d.default.isValidElement(y)?y:f?t.jsx(c.DescriptionMD,{$type:m,children:y}):t.jsx(c.DescriptionBL,{$type:m,children:y}))]})]}),E&&t.jsx(c.ActionButton,{styleType:"light",onClick:E.onClick,children:E.label})]}),t.jsxs(c.DismissButton,{$type:m,onClick:$,children:[t.jsx(l.VisuallyHidden,{role:"presentation",children:"Close notification"}),t.jsx(i.CrossIcon,{"aria-hidden":!0})]})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),s=require("@lifesg/react-icons"),t=require("@react-spring/web"),r=require("clsx"),a=require("react"),n=require("../button/button.js"),l=require("../shared/accessibility/index.js"),c=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../theme/utils/use-media-query.js"),u=require("../typography/index.js"),d=require("./toast.styles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=m(r),p=m(a);const h=4e3,y={success:s.TickCircleFillIcon,warning:s.ExclamationTriangleFillIcon,error:s.ExclamationCircleFillIcon,info:s.ICircleFillIcon};exports.Toast=r=>{var{type:m="success",title:x,label:f,className:q,autoDismiss:v,autoDismissTime:g=h,onDismiss:b,fixed:k=!0,actionButton:E}=r,N=e.__rest(r,["type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const T=a.useRef(null),[C,I]=a.useState(!1),B=o.useMaxWidthMediaQuery("lg");a.useEffect((()=>{I(!0)}),[]),a.useEffect((()=>{if(!v)return;const e=setTimeout((()=>{I(!1)}),g);return()=>clearTimeout(e)}),[v,g]),a.useEffect((()=>{const e=e=>{var i;"Escape"===e.key&&(null===(i=T.current)||void 0===i?void 0:i.contains(document.activeElement))&&D()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const D=()=>{I(!1)},w=t.useSpring({opacity:C?1:0,transform:C?B?"translateY(0%)":"translateX(0%)":B?"translateY(-1500%)":"translateX(150%)",config:{easing:t.easings.easeInOutQuart,duration:1e3},onRest:()=>{C||null==b||b()}});return i.jsxs(t.animated.div,Object.assign({ref:T,style:w,className:j.default(d.wrapper,q),"data-type":m,"data-fixed":k,role:"alert",inert:l.inertValue(!C)},N,{children:[i.jsx(l.VisuallyHidden,{children:m}),i.jsxs("div",{className:d.contentWrapper,children:[i.jsxs("div",{className:d.textIconWrapper,"data-type":m,children:[(()=>{const e=y[m];return e&&i.jsx(e,{"aria-hidden":!0})})(),i.jsxs("div",{className:d.textContainer,children:[x&&(p.default.isValidElement(x)?x:i.jsx("h2",{className:d.title,role:"presentation",children:x})),f&&(p.default.isValidElement(f)?f:x?i.jsx(u.Typography.BodyMD,{className:d.description,children:f}):i.jsx(u.Typography.BodyBL,{className:d.description,children:f}))]})]}),E&&i.jsx(n.Button,{className:d.actionButton,styleType:"light",onClick:E.onClick,sizeType:"small",children:E.label})]}),i.jsxs(c.ClickableIcon,{className:d.dismissButton,onClick:D,children:[i.jsx(l.VisuallyHidden,{role:"presentation",children:"Close notification"}),i.jsx(s.CrossIcon,{"aria-hidden":!0})]})]}))};
 //# sourceMappingURL=toast.js.map

package/cjs/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { easings, useSpring } from \"@react-spring/web\";\nimport React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    ActionButton,\n    ContentWrapper,\n    DescriptionBL,\n    DescriptionMD,\n    DismissButton,\n    TextContainer,\n    TextIconWrapper,\n    Title,\n    Wrapper,\n} from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const theme = useContext(ThemeContext);\n\n    const mobileBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: 1000,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <Title $type={type} role=\"presentation\">\n                    {title}\n                </Title>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return <DescriptionMD $type={type}>{label}</DescriptionMD>;\n        } else {\n            return <DescriptionBL $type={type}>{label}</DescriptionBL>;\n        }\n    };\n\n    return (\n        <Wrapper\n            ref={toastRef}\n            style={transitions}\n            $type={type}\n            $fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <ContentWrapper>\n                <TextIconWrapper $type={type}>\n                    {renderIcon()}\n                    <TextContainer>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </TextContainer>\n                </TextIconWrapper>\n\n                {actionButton && (\n                    <ActionButton\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                    >\n                        {actionButton.label}\n                    </ActionButton>\n                )}\n            </ContentWrapper>\n            <DismissButton $type={type} onClick={handleDismiss}>\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </DismissButton>\n        </Wrapper>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","_a","type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","Wrapper","Object","assign","ref","style","$type","$fixed","role","inert","inertValue","children","_jsx","VisuallyHidden","ContentWrapper","TextIconWrapper","Icon","renderIcon","TextContainer","React","isValidElement","Title","DescriptionMD","DescriptionBL","ActionButton","styleType","onClick","DismissButton","CrossIcon"],"mappings":"0cA2BA,MAAMA,EAA4B,IAE5BC,EAAiB,CACnBC,QAASC,EAAAA,mBACTC,QAASC,EAAAA,4BACTC,MAAOC,EAAAA,0BACPC,KAAMC,EAAAA,+BAGYC,QAAAC,KAClBA,EAAO,UAASC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,gBACXA,EAAkBf,EAAyBgB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYR,EACTS,EAAUC,EAAAA,OAAAV,EATK,CAAA,OAAA,QAAA,QAAA,cAAA,kBAAA,YAAA,QAAA,iBAclB,MAAMW,EAAWC,EAAAA,OAAuB,OACjCC,EAAWC,GAAcC,EAAAA,UAAkB,GAE5CC,EAAQC,EAAAA,WAAWC,gBAEnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAMdK,EAAAA,WAAU,KACNV,GAAW,EAAK,GACjB,IAEHU,EAAAA,WAAU,KACN,IAAKpB,EAAa,OAElB,MAAMqB,EAAUC,YAAW,KACvBZ,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMsB,aAAaF,EAAQ,GACnC,CAACrB,IAEJoB,EAAAA,WAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhB9B,EAAAW,EAASoB,eAAO,IAAA/B,OAAA,EAAAA,EAAEgC,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBrB,GAAW,EAAM,EAMfwB,EAAcC,EAAAA,UAAU,CAC1BC,QAAS3B,EAAY,EAAI,EACzB4B,UAAW5B,EACLQ,EACI,iBACA,iBACJA,EACA,qBACA,mBACNqB,OAAQ,CACJC,OAAQC,EAAAA,QAAQC,eAChBC,SAAU,KAEdC,OAAQ,KACClC,GAAWP,SAAAA,GAAa,IAkCrC,OACI0C,EAAAA,KAACC,UAAOC,OAAAC,OAAA,CACJC,IAAKzC,EACL0C,MAAOf,EAAWgB,MACXrD,EAAIsD,OACHhD,EACRiD,KAAK,QACLC,MAAOC,EAAAA,YAAY7C,IACfJ,EAAU,CAAAkD,SAAA,CAEdC,MAACC,EAAAA,eAAc,CAAAF,SAAE1D,IACjB+C,EAAAA,KAACc,EAAAA,eAAc,CAAAH,SAAA,CACXX,EAAAA,KAACe,EAAAA,gBAAe,CAAAT,MAAQrD,EAAI0D,SAAA,CAvCrB,MACf,MAAMK,EAAOzE,EAAeU,GAC5B,OAAO+D,GAAQJ,EAAAA,IAACI,qBAAmB,EAsCtBC,GACDjB,EAAAA,KAACkB,EAAAA,cAAa,CAAAP,SAAA,CACTzD,IApCbiE,EAAAA,QAAMC,eAAelE,GACdA,EAGH0D,EAAAA,IAACS,QAAK,CAAAf,MAAQrD,EAAMuD,KAAK,eAAcG,SAClCzD,KAgCIC,IAzBbgE,EAAAA,QAAMC,eAAejE,GACdA,EACAD,EACA0D,EAAAA,IAACU,EAAAA,cAAa,CAAAhB,MAAQrD,EAAI0D,SAAGxD,IAE7ByD,EAAAA,IAACW,EAAAA,cAAa,CAAAjB,MAAQrD,EAAI0D,SAAGxD,WAwB/BK,GACGoD,EAAAA,IAACY,EAAAA,aAAY,CACTC,UAAU,QACVC,QAASlE,EAAakE,QAAOf,SAE5BnD,EAAaL,WAI1B6C,OAAC2B,EAAAA,cAAa,CAAArB,MAAQrD,EAAMyE,QAASvC,EAAawB,SAAA,CAC9CC,EAAAA,IAACC,EAAAA,gBAAeL,KAAK,eAAcG,SAAA,uBAGnCC,MAACgB,EAAAA,UAAS,CAAA,eAAA,UAER"}
+{"version":3,"file":"toast.js","sources":["../../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\n// @catalog\n/**\n * A brief notification that appears on screen to provide feedback about an\n * operation or event.\n *\n * Use `Toast` to surface status messages without interrupting the user's workflow.\n * @keywords alert, feedback, notification, snackbar\n */\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","styles.description","BodyBL","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"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"}

package/cjs/toast/toast.styles.js

@@ -1,99 +1,2 @@
-"use strict";var e=require("@react-spring/web"),r=require("styled-components"),t=require("../button/button.js"),o=require("../shared/clickable-icon/clickable-icon.js"),i=require("../typography/index.js"),n=require("../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(r);const d=e=>{const r={success:{Background:"bg-success",Border:"border-success",Text:"text-success",Icon:"icon-success"},warning:{Background:"bg-warning",Border:"border-warning",Text:"text-warning",Icon:"icon-warning"},error:{Background:"bg-error",Border:"border-error",Text:"text-error",Icon:"icon-error"},info:{Background:"bg-info",Border:"border-info",Text:"text-info",Icon:"icon-info"}}[e.$type];return{Background:n.V3_Colour[r.Background],Border:n.V3_Colour[r.Border],Text:n.V3_Colour[r.Text],Icon:n.V3_Colour[r.Icon]}},c=e.animated(s.default.div`
-    display: flex;
-    flex-direction: row;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    margin: ${e=>e.$fixed?"1rem":0};
-    top: 0;
-    right: 0;
-    padding: 1rem;
-    border-radius: ${n.V3_Radius.md};
-    z-index: 10;
-    align-items: center;
-    gap: 2rem;
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        left: 0;
-    }
-
-    ${e=>r.css`
-            background: ${d(e).Background};
-            border: 1px solid ${d(e).Border};
-            color: ${d(e).Text};
-        `};
-`),l=s.default.div`
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    flex: 1;
-    justify-content: space-between;
-
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        display: flex;
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-`,u=s.default.div`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-
-    ${e=>r.css`
-            & > svg {
-                flex-shrink: 0;
-                width: 1.5rem;
-                height: 1.5rem;
-                margin-top: 0.0625rem;
-                margin-right: 0.5rem;
-                color: ${d(e).Icon};
-            }
-        `};
-`,x=s.default.div`
-    display: flex;
-    flex-direction: column;
-`,g=s.default.h2`
-    display: flex;
-    ${n.V3_Font["body-baseline-semibold"]}
-
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,f=s.default(i.Typography.BodyMD)`
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,p=s.default(i.Typography.BodyBL)`
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,m=s.default(t.Button.Small)`
-    align-self: center;
-    margin-left: auto;
-    height: auto;
-    width: fit-content;
-    flex-shrink: 0;
-
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        align-self: flex-start;
-        margin-left: 2rem;
-    }
-`,h=s.default(o.ClickableIcon)`
-    padding: 0.75rem;
-    margin: -0.75rem;
-    align-self: stretch;
-
-    ${e=>r.css`
-            svg {
-                width: 1.5rem;
-                height: 1.5rem;
-                color: ${d(e).Text};
-            }
-            &:hover {
-                background: transparent;
-            }
-            ${n.V3_MediaQuery.MaxWidth.sm} {
-                align-self: center;
-            }
-        `};
-`;exports.ActionButton=m,exports.ContentWrapper=l,exports.DescriptionBL=p,exports.DescriptionMD=f,exports.DismissButton=h,exports.TextContainer=x,exports.TextIconWrapper=u,exports.Title=g,exports.Wrapper=c;
+"use strict";require("./toast.styles_57j3lf.css");exports.actionButton="a10z10pl",exports.contentWrapper="c1ll5mdk",exports.description="dmmbr7j",exports.dismissButton="d1jd4l4i",exports.textContainer="t1j1n9on",exports.textIconWrapper="t1mt05g8",exports.title="t1see4ey",exports.wrapper="wqf508q";
 //# sourceMappingURL=toast.styles.js.map

package/cjs/toast/toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.styles.js","sources":["../../../src/toast/toast.styles.tsx"],"sourcesContent":["import { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_Font, V3_MediaQuery, V3_Radius } from \"../v3_theme\";\nimport type { V3_SemanticColourSet } from \"../v3_theme/types\";\nimport type { ToastType } from \"./types\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface StyleProps {\n    $type: ToastType;\n    $fixed?: boolean | undefined;\n}\n\nconst getValidationColorAttributes = (props: StyleProps) => {\n    const type = props.$type;\n\n    const typeMapping: Record<\n        ToastType,\n        Record<string, keyof V3_SemanticColourSet>\n    > = {\n        success: {\n            Background: \"bg-success\",\n            Border: \"border-success\",\n            Text: \"text-success\",\n            Icon: \"icon-success\",\n        },\n        warning: {\n            Background: \"bg-warning\",\n            Border: \"border-warning\",\n            Text: \"text-warning\",\n            Icon: \"icon-warning\",\n        },\n        error: {\n            Background: \"bg-error\",\n            Border: \"border-error\",\n            Text: \"text-error\",\n            Icon: \"icon-error\",\n        },\n        info: {\n            Background: \"bg-info\",\n            Border: \"border-info\",\n            Text: \"text-info\",\n            Icon: \"icon-info\",\n        },\n    };\n\n    const selectedTypeMapping = typeMapping[type];\n\n    return {\n        Background: V3_Colour[selectedTypeMapping.Background],\n        Border: V3_Colour[selectedTypeMapping.Border],\n        Text: V3_Colour[selectedTypeMapping.Text],\n        Icon: V3_Colour[selectedTypeMapping.Icon],\n    };\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = animated(styled.div<StyleProps>`\n    display: flex;\n    flex-direction: row;\n    position: ${(props) => (props.$fixed ? \"fixed\" : \"relative\")};\n    margin: ${(props) => (props.$fixed ? \"1rem\" : 0)};\n    top: 0;\n    right: 0;\n    padding: 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n    z-index: 10;\n    align-items: center;\n    gap: 2rem;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        left: 0;\n    }\n\n    ${(props) => {\n        return css`\n            background: ${getValidationColorAttributes(props).Background};\n            border: 1px solid ${getValidationColorAttributes(props).Border};\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }};\n`);\n\nexport const ContentWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 2rem;\n    flex: 1;\n    justify-content: space-between;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 0.75rem;\n    }\n`;\n\nexport const TextIconWrapper = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    ${(props) => {\n        return css`\n            & > svg {\n                flex-shrink: 0;\n                width: 1.5rem;\n                height: 1.5rem;\n                margin-top: 0.0625rem;\n                margin-right: 0.5rem;\n                color: ${getValidationColorAttributes(props).Icon};\n            }\n        `;\n    }};\n`;\n\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const Title = styled.h2<StyleProps>`\n    display: flex;\n    ${V3_Font[\"body-baseline-semibold\"]}\n\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const DescriptionMD = styled(Typography.BodyMD)<StyleProps>`\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const DescriptionBL = styled(Typography.BodyBL)<StyleProps>`\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    align-self: center;\n    margin-left: auto;\n    height: auto;\n    width: fit-content;\n    flex-shrink: 0;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        align-self: flex-start;\n        margin-left: 2rem;\n    }\n`;\n\nexport const DismissButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.75rem;\n    margin: -0.75rem;\n    align-self: stretch;\n\n    ${(props) => {\n        return css`\n            svg {\n                width: 1.5rem;\n                height: 1.5rem;\n                color: ${getValidationColorAttributes(props).Text};\n            }\n            &:hover {\n                background: transparent;\n            }\n            ${V3_MediaQuery.MaxWidth.sm} {\n                align-self: center;\n            }\n        `;\n    }};\n`;\n"],"names":["getValidationColorAttributes","props","selectedTypeMapping","success","Background","Border","Text","Icon","warning","error","info","$type","V3_Colour","Wrapper","animated","styled","div","$fixed","V3_Radius","V3_MediaQuery","MaxWidth","lg","css","ContentWrapper","sm","TextIconWrapper","TextContainer","Title","h2","V3_Font","DescriptionMD","Typography","BodyMD","DescriptionBL","BodyBL","ActionButton","Button","Small","DismissButton","ClickableIcon"],"mappings":"iUAkBA,MAAMA,EAAgCC,IAClC,MAgCMC,EA3BF,CACAC,QAAS,CACLC,WAAY,aACZC,OAAQ,iBACRC,KAAM,eACNC,KAAM,gBAEVC,QAAS,CACLJ,WAAY,aACZC,OAAQ,iBACRC,KAAM,eACNC,KAAM,gBAEVE,MAAO,CACHL,WAAY,WACZC,OAAQ,eACRC,KAAM,aACNC,KAAM,cAEVG,KAAM,CACFN,WAAY,UACZC,OAAQ,cACRC,KAAM,YACNC,KAAM,cA5BDN,EAAMU,OAkCnB,MAAO,CACHP,WAAYQ,EAAAA,UAAUV,EAAoBE,YAC1CC,OAAQO,EAAAA,UAAUV,EAAoBG,QACtCC,KAAMM,EAAAA,UAAUV,EAAoBI,MACpCC,KAAMK,EAAAA,UAAUV,EAAoBK,MACvC,EAMQM,EAAUC,EAAAA,SAASC,EAAAA,QAAOC,GAAe;;;gBAGrCf,GAAWA,EAAMgB,OAAS,QAAU;cACtChB,GAAWA,EAAMgB,OAAS,OAAS;;;;qBAI7BC,EAAAA,UAAc;;;;;MAK7BC,EAAAA,cAAcC,SAASC;;;;MAItBpB,GACQqB,KAAG;0BACQtB,EAA6BC,GAAOG;gCAC9BJ,EAA6BC,GAAOI;qBAC/CL,EAA6BC,GAAOK;;GAK5CiB,EAAiBR,EAAAA,QAAOC,GAAG;;;;;;;MAOlCG,EAAAA,cAAcC,SAASI;;;;;;EAQhBC,EAAkBV,EAAAA,QAAOC,GAAe;;;;;MAK9Cf,GACQqB,KAAG;;;;;;;yBAOOtB,EAA6BC,GAAOM;;;EAMhDmB,EAAgBX,EAAAA,QAAOC,GAAG;;;EAK1BW,EAAQZ,EAAAA,QAAOa,EAAc;;MAEpCC,EAAAA,QAAQ;;MAEP5B,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5CwB,EAAgBf,EAAAA,QAAOgB,aAAWC,OAAmB;MAC3D/B,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C2B,EAAgBlB,EAAAA,QAAOgB,aAAWG,OAAmB;MAC3DjC,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C6B,EAAepB,EAAAA,QAAOqB,SAAOC,MAAM;;;;;;;MAO1ClB,EAAAA,cAAcC,SAASI;;;;EAMhBc,EAAgBvB,EAAAA,QAAOwB,EAAAA,cAA0B;;;;;MAKvDtC,GACQqB,KAAG;;;;yBAIOtB,EAA6BC,GAAOK;;;;;cAK/Ca,EAAAA,cAAcC,SAASI;;;;"}
+{"version":3,"file":"toast.styles.js","sources":["../../../src/toast/toast.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    margin: 0;\n    top: 0;\n    right: 0;\n    padding: 1rem;\n    border-radius: ${Radius[\"md\"]};\n    z-index: 10;\n    align-items: center;\n    gap: 2rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n    }\n\n    &[data-fixed=\"true\"] {\n        position: fixed;\n        margin: 1rem;\n    }\n\n    &[data-type=\"success\"] {\n        background: ${Colour[\"bg-success\"]};\n        border: 1px solid ${Colour[\"border-success\"]};\n        color: ${Colour[\"text-success\"]};\n    }\n\n    &[data-type=\"warning\"] {\n        background: ${Colour[\"bg-warning\"]};\n        border: 1px solid ${Colour[\"border-warning\"]};\n        color: ${Colour[\"text-warning\"]};\n    }\n\n    &[data-type=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border: 1px solid ${Colour[\"border-error\"]};\n        color: ${Colour[\"text-error\"]};\n    }\n\n    &[data-type=\"info\"] {\n        background: ${Colour[\"bg-info\"]};\n        border: 1px solid ${Colour[\"border-info\"]};\n        color: ${Colour[\"text-info\"]};\n    }\n`;\n\nexport const contentWrapper = css`\n    display: flex;\n    align-items: center;\n    gap: 2rem;\n    flex: 1;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.sm} {\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 0.75rem;\n    }\n`;\n\nexport const textIconWrapper = css`\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    & > svg {\n        flex-shrink: 0;\n        width: 1.5rem;\n        height: 1.5rem;\n        margin-top: 0.0625rem;\n        margin-right: 0.5rem;\n    }\n\n    &[data-type=\"success\"] > svg {\n        color: ${Colour[\"icon-success\"]};\n    }\n\n    &[data-type=\"warning\"] > svg {\n        color: ${Colour[\"icon-warning\"]};\n    }\n\n    &[data-type=\"error\"] > svg {\n        color: ${Colour[\"icon-error\"]};\n    }\n\n    &[data-type=\"info\"] > svg {\n        color: ${Colour[\"icon-info\"]};\n    }\n`;\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const title = css`\n    display: flex;\n    ${Font[\"body-baseline-semibold\"]}\n    color: inherit;\n`;\n\nexport const description = css`\n    color: inherit;\n`;\n\nexport const actionButton = css`\n    align-self: center;\n    margin-left: auto;\n    width: fit-content;\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        align-self: flex-start;\n        margin-left: 2rem;\n    }\n`;\n\nexport const dismissButton = css`\n    padding: 0.75rem;\n    margin: -0.75rem;\n    align-self: stretch;\n    color: inherit;\n\n    &:hover {\n        background: transparent;\n    }\n\n    svg {\n        width: 1.5rem;\n        height: 1.5rem;\n        color: inherit;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        align-self: center;\n    }\n`;\n"],"names":[],"mappings":"4FA+GyB,kCA5DE,+BAwDH,gCAgBE,iCA3BA,mCA9BE,yBAmCV,2BAjGE"}

package/cjs/toast/toast.styles_57j3lf.css

@@ -0,0 +1,8 @@
+@layer fds{.wqf508q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;margin:0;top:0;right:0;padding:1rem;border-radius:var(--fds-radius-md);z-index:10;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;}:where(body.fds-breakpoint-lg-max) .wqf508q{left:0;}.wqf508q[data-fixed="true"]{position:fixed;margin:1rem;}.wqf508q[data-type="success"]{background:var(--fds-colour-bg-success);border:1px solid var(--fds-colour-border-success);color:var(--fds-colour-text-success);}.wqf508q[data-type="warning"]{background:var(--fds-colour-bg-warning);border:1px solid var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}.wqf508q[data-type="error"]{background:var(--fds-colour-bg-error);border:1px solid var(--fds-colour-border-error);color:var(--fds-colour-text-error);}.wqf508q[data-type="info"]{background:var(--fds-colour-bg-info);border:1px solid var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
+.c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.75rem;}
+.t1mt05g8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.t1mt05g8>svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:1.5rem;height:1.5rem;margin-top:0.0625rem;margin-right:0.5rem;}.t1mt05g8[data-type="success"]>svg{color:var(--fds-colour-icon-success);}.t1mt05g8[data-type="warning"]>svg{color:var(--fds-colour-icon-warning);}.t1mt05g8[data-type="error"]>svg{color:var(--fds-colour-icon-error);}.t1mt05g8[data-type="info"]>svg{color:var(--fds-colour-icon-info);}
+.t1j1n9on{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.t1see4ey{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:inherit;}
+.dmmbr7j{color:inherit;}
+.a10z10pl{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-left:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a10z10pl{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;margin-left:2rem;}
+.d1jd4l4i{padding:0.75rem;margin:-0.75rem;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;color:inherit;}.d1jd4l4i:hover{background:transparent;}.d1jd4l4i svg{width:1.5rem;height:1.5rem;color:inherit;}:where(body.fds-breakpoint-sm-max) .d1jd4l4i{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}}

package/cjs/toggle/toggle-icon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/circle"),c=require("@lifesg/react-icons/circle-dot"),i=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/square"),a=require("@lifesg/react-icons/square-tick-fill"),t=require("@lifesg/react-icons/tick"),l=require("clsx"),o=require("./toggle-icon.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(l);exports.ToggleIcon=({type:l,active:n=!1,disabled:d,className:f,error:p})=>{let q;switch(l){case"checkbox":q=n?e.jsx(a.SquareTickFillIcon,{}):e.jsx(s.SquareIcon,{});break;case"radio":q=n?e.jsx(c.CircleDotIcon,{}):e.jsx(r.CircleIcon,{});break;case"tick":q=e.jsx(t.TickIcon,{});break;case"cross":q=e.jsx(i.CrossIcon,{});break;default:q=null}return e.jsx("div",{className:u.default(o.wrapperBase,n?d?o.wrapperActiveDisabled:p?o.wrapperError:o.wrapperActive:d?o.wrapperDisabled:void 0,f),"aria-hidden":!0,children:q})};
+//# sourceMappingURL=toggle-icon.js.map

package/cjs/toggle/toggle-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.js","sources":["../../../src/toggle/toggle-icon.tsx"],"sourcesContent":["import { CircleIcon } from \"@lifesg/react-icons/circle\";\nimport { CircleDotIcon } from \"@lifesg/react-icons/circle-dot\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./toggle-icon.styles\";\n\nexport type ToggleIconType = \"checkbox\" | \"radio\" | \"tick\" | \"cross\";\n\nexport interface ToggleIconProps {\n    type: ToggleIconType;\n    active?: boolean | undefined;\n    disabled?: boolean | undefined;\n    error?: boolean | undefined;\n    className?: string | undefined;\n}\n\nexport const ToggleIcon = ({\n    type,\n    active = false,\n    disabled,\n    className,\n    error,\n}: ToggleIconProps) => {\n    let component: JSX.Element | null;\n\n    const getWrapperStateClass = () => {\n        if (active) {\n            if (disabled) {\n                return styles.wrapperActiveDisabled;\n            }\n\n            if (error) {\n                return styles.wrapperError;\n            }\n\n            return styles.wrapperActive;\n        }\n\n        if (disabled) {\n            return styles.wrapperDisabled;\n        }\n\n        return undefined;\n    };\n\n    switch (type) {\n        case \"checkbox\":\n            component = active ? <SquareTickFillIcon /> : <SquareIcon />;\n            break;\n        case \"radio\":\n            component = active ? <CircleDotIcon /> : <CircleIcon />;\n            break;\n        case \"tick\":\n            component = <TickIcon />;\n            break;\n        case \"cross\":\n            component = <CrossIcon />;\n            break;\n        default:\n            component = null;\n            break;\n    }\n\n    return (\n        <div\n            className={clsx(\n                styles.wrapperBase,\n                getWrapperStateClass(),\n                className\n            )}\n            aria-hidden\n        >\n            {component}\n        </div>\n    );\n};\n"],"names":["type","active","disabled","className","error","component","_jsx","SquareTickFillIcon","SquareIcon","CircleDotIcon","CircleIcon","TickIcon","CrossIcon","clsx","styles.wrapperBase","styles.wrapperActiveDisabled","styles.wrapperError","styles.wrapperActive","styles.wrapperDisabled"],"mappings":"wcAoB0B,EACtBA,OACAC,UAAS,EACTC,WACAC,YACAC,YAEA,IAAIC,EAsBJ,OAAQL,GACJ,IAAK,WACDK,EAAYJ,EAASK,EAAAA,IAACC,EAAAA,mBAAkB,CAAA,GAAMD,EAAAA,IAACE,EAAAA,eAC/C,MACJ,IAAK,QACDH,EAAYJ,EAASK,EAAAA,IAACG,EAAAA,cAAa,CAAA,GAAMH,EAAAA,IAACI,EAAAA,eAC1C,MACJ,IAAK,OACDL,EAAYC,EAAAA,IAACK,EAAAA,SAAQ,IACrB,MACJ,IAAK,QACDN,EAAYC,EAAAA,IAACM,EAAAA,UAAS,IACtB,MACJ,QACIP,EAAY,KAIpB,OACIC,EAAAA,IAAA,MAAA,CACIH,UAAWU,EAAAA,QACPC,EAAAA,YAxCJb,EACIC,EACOa,EAAAA,sBAGPX,EACOY,EAAAA,aAGJC,EAAAA,cAGPf,EACOgB,EAAAA,qBADX,EA8BQf,6BAIHE,GACC"}

package/cjs/toggle/toggle-icon.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./toggle-icon.styles_o6dxr3.css");exports.wrapperActive="w1d4lch6",exports.wrapperActiveDisabled="w1egk5xb",exports.wrapperBase="wxufi5f",exports.wrapperDisabled="wo9gzbp",exports.wrapperError="w1tlwg9n";
+//# sourceMappingURL=toggle-icon.styles.js.map

package/cjs/toggle/toggle-icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.styles.js","sources":["../../../src/toggle/toggle-icon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapperBase = css`\n    height: 1.625rem;\n    width: 1.625rem;\n    margin-right: 0.5rem;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-subtle\"]};\n\n    svg {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const wrapperDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const wrapperError = css`\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const wrapperActive = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const wrapperActiveDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n"],"names":[],"mappings":"oGA4B0B,yCAIQ,+BAzBV,kCAaI,+BAIH"}

package/cjs/toggle/toggle-icon.styles_o6dxr3.css

@@ -0,0 +1,5 @@
+@layer fds{.wxufi5f{height:1.625rem;width:1.625rem;margin-right:0.5rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-subtle);}.wxufi5f svg{height:100%;width:100%;}
+.wo9gzbp{color:var(--fds-colour-icon-disabled-subtle);}
+.w1tlwg9n{color:var(--fds-colour-icon-error-strong);}
+.w1d4lch6{color:var(--fds-colour-icon-selected);}
+.w1egk5xb{color:var(--fds-colour-icon-selected-disabled);}}

package/cjs/toggle/toggle.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),t=require("@lifesg/react-icons/chevron-up"),n=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js");var a=require("./toggle.styles.js");exports.Toggle=d=>{var{type:l="checkbox",indicator:o,checked:c,styleType:u="default",children:h,childrenMaxLines:b,subLabel:p,disabled:x,error:$,name:j,id:g,className:m,compositeSection:y,removable:v,onRemove:C,"data-testid":k,onChange:f,useContentWidth:q,"aria-describedby":S}=d,T=e.__rest(d,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","onRemove","data-testid","onChange","useContentWidth","aria-describedby"]);const{collapsible:w=!0,errors:E,children:I,initialExpanded:L}=y||{},[A,R]=n.useState(c),[N,_]=n.useState(!!L),B=n.useMemo((()=>{const e=Array.isArray(E)&&(null==E?void 0:E.length)>0,r=!Array.isArray(E)&&!!E;return e||r}),[E]),[F]=n.useState(s.SimpleIdGenerator.generate()),M=g?`${g}`:`tg-${F}`,W=n.useRef(null);n.useEffect((()=>{R(c)}),[c]),n.useEffect((()=>{A&&_(null==L||L)}),[A]);const P=e=>{if(!x){if(f)return void f(e);switch(l){case"checkbox":R((e=>!e));break;case"radio":case"yes":case"no":A||R(!0)}}},D=()=>{x||_(!N)},G=()=>{x||!C||C()},H=()=>{var e;null===(e=null==W?void 0:W.current)||void 0===e||e.click()},O=e=>{e.stopPropagation()},U=()=>{let e;switch(l){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=l}return r.jsx(a.StyledToggleIcon,{type:e,active:A,disabled:x,$selected:A,$disabled:x})},z=()=>{if(!p)return null;let e;return e="function"==typeof p?p():p,r.jsx(a.SubLabel,{"data-id":"toggle-sublabel",id:`${M}-sublabel`,"aria-hidden":!0,children:e})},J=()=>{const e=!N&&!B;return w&&r.jsxs(a.ExpandButton,{$paddingTopRequired:e,disabled:x,onClick:D,"data-testid":N?"collapse-button":"expand-button",children:[N?"Show less":"Show more",N?r.jsx(t.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(i.ChevronDownIcon,{"aria-hidden":!0})]})},K=e=>r.jsxs(r.Fragment,{children:[r.jsx(a.ErrorText,{weight:"semibold",$disabled:x,children:"Error"}),r.jsx(a.ErrorList,{$disabled:x,children:null==e?void 0:e.map(((e,i)=>r.jsx("li",{id:`${M}-error-list-item-${i}`,children:r.jsx(a.ErrorText,{weight:"semibold",$disabled:x,children:e})},i)))})]});return r.jsxs(a.Container,{$selected:A,$disabled:x,className:m,$styleType:u,$error:$,$indicator:o,$useContentWidth:q,id:g,"data-testid":k,children:[(()=>{const e=["string"==typeof p?`${M}-sublabel`:null,S].filter(Boolean).join(" ")||void 0;return r.jsxs(a.HeaderContainer,{id:`${M}-header-container`,$disabled:x,$error:$,$selected:A,$indicator:o,$styleType:u,children:[r.jsx(a.IndicatorLabelContainer,{$addPadding:v,children:r.jsxs(a.InputContainer,{id:`${M}-input-container`,onClick:H,children:[r.jsx(a.Input,Object.assign({ref:W,name:j,id:`${M}-input`,type:"checkbox"===l?"checkbox":"radio","data-testid":"toggle-input",disabled:x,onChange:P,onClick:O,checked:A,"aria-describedby":e},T)),o&&U(),r.jsxs(a.TextContainer,{$selected:A,$disabled:x,children:[r.jsx(a.Label,{htmlFor:`${M}-input`,"data-testid":"toggle-label",id:`${M}-label`,$maxLines:b,$selected:A,children:h}),p&&z()]})]})}),v&&r.jsx(a.RemoveButton,{type:"button",$disabled:x,onClick:G,id:`${M}-remove-button`,children:"Remove"})]})})(),I&&r.jsxs("div",{children:[(!w||N)&&r.jsx(a.Children,{"data-id":"toggle-composite-children",$isFinalItem:!w,$disabled:x,children:I}),w&&!N&&B&&r.jsx(a.ErrorContainer,{$disabled:x,onClick:D,id:`${M}-error-alert`,children:r.jsx(a.AlertContainer,{type:x?"description":"error",className:m,showIcon:!0,children:Array.isArray(E)?K(E):E})}),J()]})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-down"),l=require("@lifesg/react-icons/chevron-up"),i=require("clsx"),a=require("react"),o=require("../alert/alert.js"),s=require("../markup/markup.js"),n=require("../text-list/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var c=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("./toggle.styles.js"),h=require("./toggle-icon.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=m(i);exports.Toggle=i=>{var{type:m="checkbox",indicator:x,checked:g,styleType:j="default",children:v,childrenMaxLines:f,subLabel:y,disabled:C,error:k,name:q,id:D,className:N,compositeSection:T,removable:S,focusableWhenDisabled:$,useContentWidth:L,onRemove:E,onChange:w,"data-testid":A,"aria-describedby":I}=i,B=e.__rest(i,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:M=!0,errors:R,children:F,initialExpanded:W}=T||{},[P,_]=a.useState(g),[H,U]=a.useState(!!W),z=a.useMemo((()=>{const e=Array.isArray(R)&&(null==R?void 0:R.length)>0,r=!Array.isArray(R)&&!!R;return e||r}),[R]),O=u.useId(),G=D?`${D}`:`tg-${O}`,J=a.useRef(null),K=a.useRef(null);d.useApplyStyle(K,{[b.tokens.label.desktopLineClamp]:null==(null==f?void 0:f.desktop)?null:`${f.desktop}`,[b.tokens.label.tabletLineClamp]:null==(null==f?void 0:f.tablet)?null:`${f.tablet}`,[b.tokens.label.mobileLineClamp]:null==(null==f?void 0:f.mobile)?null:`${f.mobile}`});const Q=!!C&&!!$,V=!!C&&!$,X=!!C;a.useEffect((()=>{_(g)}),[g]),a.useEffect((()=>{P&&U(null==W||W)}),[P]);const Y=e=>{if(X)e.preventDefault();else if(w)w(e);else switch(m){case"checkbox":_((e=>!e));break;case"radio":case"yes":case"no":P||_(!0)}},Z=()=>{C||U(!H)},ee=()=>{C||!E||E()},re=()=>{var e;null===(e=null==J?void 0:J.current)||void 0===e||e.click()},te=e=>{e.stopPropagation()},le=()=>{let e;switch(m){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=m}return r.jsx(h.ToggleIcon,{type:e,active:P,disabled:C,error:k})},ie=()=>{if(!y)return null;let e;return e="function"==typeof y?y():y,r.jsx("div",{"data-id":"toggle-sublabel",id:`${G}-sublabel`,"aria-hidden":!0,className:b.subLabel,children:e})},ae=()=>{const e=!H&&!z;return M&&r.jsx("button",{className:p.default(b.expandButton,C?b.disabledColorCursor:b.colorTextPrimary,e&&b.expandButtonPaddingTopRequired),disabled:C,onClick:Z,"data-testid":H?"collapse-button":"expand-button",children:H?r.jsxs(r.Fragment,{children:["Show less",r.jsx(l.ChevronUpIcon,{"aria-hidden":!0})]}):r.jsxs(r.Fragment,{children:["Show more",r.jsx(t.ChevronDownIcon,{"aria-hidden":!0})]})})},oe=e=>{const t=p.default(b.colorTextError,C&&b.colorTextDisabled);return r.jsxs(r.Fragment,{children:[r.jsx(c.Typography.BodyMD,{weight:"semibold",className:t,children:"Error"}),r.jsx(n.TextList.Ul,{className:t,children:null==e?void 0:e.map(((e,l)=>r.jsx("li",{id:`${G}-error-list-item-${l}`,children:r.jsx(c.Typography.BodyMD,{weight:"semibold",className:t,children:e})},l)))})]})};return r.jsxs("div",{className:p.default(b.container,!P&&k?b.borderError:"no-border"===j?b.borderNone:P&&C?b.borderSelectedDisabled:C?b.borderDisabled:k?b.borderError:P?b.borderSelected:b.borderDefault,P?k?b.bgError:C?b.bgSelectedDisabled:b.bgSelected:C&&"no-border"!==j?b.bgDisabled:b.bgDefault,C?null:P?k?b.toggleContainerHoverError:b.toggleContainerHoverSelected:b.toggleContainerHoverDefault,!x&&b.containerNoIndicator,L&&b.containerUseContentWidth,N),id:D,"data-testid":A,children:[(()=>{const e=["string"==typeof y?`${G}-sublabel`:null,I].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{id:`${G}-header-container`,className:b.headerContainer,children:[r.jsx("div",{className:p.default(b.indicatorLabelContainer,S&&b.indicatorLabelContainerAddPadding),children:r.jsxs("div",{id:`${G}-input-container`,onClick:re,className:b.inputContainer,children:[r.jsx("input",Object.assign({ref:J,name:q,id:`${G}-input`,type:"checkbox"===m?"checkbox":"radio","data-testid":"toggle-input",className:p.default(b.input,C&&b.disabledColorCursor),disabled:V,"aria-disabled":Q,onChange:Y,onClick:te,checked:P,tabIndex:Q?0:void 0,"aria-describedby":e},B)),x&&le(),r.jsxs("div",{className:p.default(b.textContainer,P?k?b.colorTextError:C?b.toggleTextContainerDisabledSelected:b.toggleTextContainerSelected:C?b.colorTextDisabled:b.colorTextDefault),children:[r.jsx("label",{ref:K,htmlFor:`${G}-input`,"data-testid":"toggle-label",id:`${G}-label`,className:p.default(b.label,P?b.toggleLabelSelected:b.toggleLabelDefault),children:v}),y&&ie()]})]})}),S&&r.jsx("button",{type:"button",className:p.default(b.removeButton,C&&b.disabledColorCursor),onClick:ee,id:`${G}-remove-button`,children:"Remove"})]})})(),F&&r.jsxs("div",{children:[(!M||H)&&r.jsx("div",{"data-id":"toggle-composite-children",className:p.default(b.children,!M&&b.childrenIsFinalItem,C?b.colorTextDisabled:b.colorTextDefault),children:r.jsx(s.Markup,{baseTextSize:"body-md",children:F})}),M&&!H&&z&&r.jsx("div",{className:p.default(b.errorContainer,C?b.disabledColorCursor:b.colorTextDefault),onClick:Z,id:`${G}-error-alert`,children:r.jsx(o.Alert,{type:C?"description":"error",className:b.alertContainer,showIcon:!0,children:Array.isArray(R)?oe(R):R})}),ae()]})]})};
 //# sourceMappingURL=toggle.js.map