@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.3

package/time-slot-bar/time-slot-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.js","sources":["../../src/time-slot-bar/time-slot-bar.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport type { MouseEvent } from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { TimeSlotBarHelper } from \"./helper\";\nimport {\n    ArrowButton,\n    ArrowIconLeft,\n    ArrowIconRight,\n    CellText,\n    Container,\n    getCellWidth,\n    TimeLabel,\n    TimeMarker,\n    TimeMarkerWrapper,\n    TimeSlot,\n    TimeSlotBarContainer,\n    TimeSlotBorder,\n    TimeSlotWrapper,\n} from \"./time-slot-bar.styles\";\nimport type {\n    Direction,\n    TimeSlot as TTimeSlot,\n    TimeSlotBarProps,\n    TimeSlotBarRef,\n    TimeSlotBarVariant,\n} from \"./types\";\n\nconst CELL_DURATION = 30; // In minutes\n\nconst Component = (props: TimeSlotBarProps, ref: React.Ref<TimeSlotBarRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        \"data-testid\": testId,\n        className,\n        variant = \"default\",\n        startTime,\n        endTime,\n        slots,\n        onSlotClick,\n        onClick,\n        styleAttributes,\n        initialScrollTime,\n        roundInitialScrollTime = true,\n    } = props;\n    const barRef = useRef<HTMLDivElement>(null);\n    const [scrollPosition, setScrollPosition] = useState<number>(0);\n    const [clientWidth, setClientWidth] = useState<number>(0);\n    const cellWidth = getCellWidth(variant);\n\n    const adjustedStartTime = TimeSlotBarHelper.adjustTimeForMarker(\n        startTime,\n        \"start\"\n    );\n    const adjustedEndTime = TimeSlotBarHelper.adjustTimeForMarker(\n        endTime,\n        \"end\"\n    );\n\n    const SCROLL_INCREMENT = cellWidth * 2.5; // In px. Each scroll increment corresponds to 75mins\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    const { summary: slotsSummary, computedSlots: allSlots } = useMemo(() => {\n        return TimeSlotBarHelper.processSlots(\n            { start: adjustedStartTime, end: adjustedEndTime },\n            slots,\n            variant\n        );\n    }, [adjustedStartTime, adjustedEndTime, slots, variant]);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        const container = barRef.current;\n        if (container) {\n            container.addEventListener(\"scroll\", handleScroll);\n            // Initialize clientWidth on mount\n            setClientWidth(container.clientWidth);\n        }\n\n        return () => {\n            if (container) {\n                container.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, []);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, cellWidth, startTime, endTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleScroll = () => {\n        if (barRef.current) {\n            setScrollPosition(barRef.current.scrollLeft);\n        }\n    };\n\n    const handleArrowButtonClick = (direction: Direction) => {\n        if (barRef.current) {\n            barRef.current.scrollBy({\n                left:\n                    direction === \"left\" ? -SCROLL_INCREMENT : SCROLL_INCREMENT,\n                behavior: \"smooth\",\n            });\n        }\n    };\n\n    const handleResize = () => {\n        if (barRef.current) {\n            setClientWidth(barRef.current.clientWidth);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: barRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * NOTE: Special condition\n     * Show ellipsis only if the slotWidth is smaller or equal to\n     * 15min interval\n     */\n    const showFullEllipsis = (slotWidth: number) => {\n        return slotWidth <= cellWidth / 2;\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!testId) return undefined;\n        return `${testId}-${subStr}`;\n    };\n\n    /**\n     * Function to determine if a long time marker should be displayed\n     * For minified variant the long time marker is displayed every alternate hour\n     */\n    const shouldDisplayLongTimeMarker = (\n        currentTime: Dayjs,\n        isStartHourEven: boolean, // To determine if the first hour is even or odd for minified\n        variant: TimeSlotBarVariant\n    ) => {\n        const isHour = currentTime.minute() === 0;\n\n        if (variant === \"default\") {\n            return isHour;\n        }\n\n        const isAlternateHour =\n            isHour &&\n            (isStartHourEven\n                ? currentTime.hour() % 2 === 0\n                : currentTime.hour() % 2 === 1);\n\n        return isAlternateHour;\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (initialScrollTime && barRef.current && cellWidth > 0) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: adjustedStartTime,\n                maxTime: adjustedEndTime,\n                interval: CELL_DURATION,\n                intervalWidth: cellWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                barRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    const isVariant = (v: TimeSlotBarVariant) => {\n        if (variant === v) return true;\n        return false;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    // Render time markers\n    const renderTimeMarkers = () => {\n        const timeMarkers = [];\n        const startTimeFormatted = dayjs(adjustedStartTime, \"HH:mm\");\n        const endTimeFormatted = dayjs(adjustedEndTime, \"HH:mm\");\n\n        const isStartHourEven = startTimeFormatted.hour() % 2 === 0;\n\n        for (\n            let currentTime = startTimeFormatted;\n            currentTime.isBefore(endTimeFormatted);\n            currentTime = currentTime.add(CELL_DURATION, \"minute\")\n        ) {\n            const displayLongTimeMarker = shouldDisplayLongTimeMarker(\n                currentTime,\n                isStartHourEven,\n                variant\n            );\n\n            timeMarkers.push(\n                <TimeMarker\n                    data-testid={`${currentTime.format(\"HH:mm\")}-marker`}\n                    key={currentTime.format(\"HH:mm\")}\n                    $isLongMarker={displayLongTimeMarker}\n                    $variant={variant}\n                >\n                    {displayLongTimeMarker && (\n                        <TimeLabel weight=\"semibold\">\n                            {TimeSlotBarHelper.formatHourlyDisplay(\n                                currentTime.format(\"HH:mm\")\n                            )}\n                        </TimeLabel>\n                    )}\n                </TimeMarker>\n            );\n        }\n        return timeMarkers;\n    };\n\n    // Render default time slot (aka background)\n    const renderDefaultTimeSlots = () => {\n        if (!styleAttributes) return;\n\n        const {\n            backgroundColor,\n            backgroundColor2,\n            hoverBackgroundColor,\n            hoverBackgroundColor2,\n            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && isVariant(\"default\");\n\n        return (\n            <>\n                <TimeSlotBorder $variant={variant} />\n                <TimeSlot\n                    key={\"default-timeslot\"}\n                    data-testid={getDataTestId(\"default-timeslot\")}\n                    $width={slotWidth}\n                    $variant={variant}\n                    $left={0}\n                    $styleType={styleType}\n                    $bgColor={backgroundColor}\n                    $bgColor2={backgroundColor2}\n                    $hoverBgColor={hoverBackgroundColor}\n                    $hoverBgColor2={hoverBackgroundColor2}\n                    $clickable={isClickable}\n                    onClick={isClickable ? onClick : undefined}\n                />\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return allSlots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n                ariaLabel,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\n                hoverBackgroundColor,\n                hoverBackgroundColor2,\n            } = styleAttributes;\n\n            const slotWidth = TimeSlotBarHelper.calculateWidth(\n                slotStartTime,\n                slotEndTime,\n                cellWidth\n            );\n            const slotOffset = TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                slotStartTime,\n                cellWidth\n            );\n\n            const isClickable = clickable && variant === \"default\";\n            const showLabel = isVariant(\"default\") && label;\n\n            const handleSlotClick =\n                (clickedSlot: TTimeSlot & { ariaLabel?: string }) =>\n                (evt: MouseEvent<HTMLElement>) => {\n                    evt.stopPropagation();\n                    const { ariaLabel: _, ...slot } = clickedSlot;\n                    if (isClickable) onSlotClick(slot);\n                };\n\n            return (\n                <div key={id} role=\"gridcell\">\n                    <TimeSlotBorder\n                        data-testid=\"start-border\"\n                        $variant={variant}\n                        style={{\n                            left: `${slotOffset}px`,\n                        }}\n                    />\n                    <TimeSlot\n                        data-testid={getDataTestId(`${id}-timeslot`)}\n                        $width={slotWidth}\n                        $left={slotOffset}\n                        $styleType={styleType}\n                        $variant={variant}\n                        $bgColor={backgroundColor}\n                        $bgColor2={backgroundColor2}\n                        $hoverBgColor={hoverBackgroundColor}\n                        $hoverBgColor2={hoverBackgroundColor2}\n                        $clickable={isClickable}\n                        onClick={handleSlotClick(slot)}\n                    >\n                        {!!ariaLabel && (\n                            <VisuallyHidden>\n                                <button\n                                    type=\"button\" // overrides default type=\"submit\" when used with <form>\n                                    aria-disabled={!isClickable}\n                                    aria-label={ariaLabel}\n                                    onClick={handleSlotClick(slot)} // use `button` element native keyboard activation handling\n                                />\n                            </VisuallyHidden>\n                        )}\n\n                        {showLabel && (\n                            <CellText\n                                $slotWidth={slotWidth}\n                                $color={color}\n                                weight={\"semibold\"}\n                                aria-hidden={!ariaLabel}\n                            >\n                                {showFullEllipsis(slotWidth) ? \"...\" : label}\n                            </CellText>\n                        )}\n                    </TimeSlot>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotBorder\n                            data-testid=\"end-border\"\n                            $variant={variant}\n                            style={{\n                                left: `${slotOffset + slotWidth}px`,\n                            }}\n                        />\n                    )}\n                </div>\n            );\n        });\n    };\n\n    const renderArrowButtonLeft = () => {\n        return (\n            <>\n                {/* Show the left ArrowButton when the scroll position is greater than 0 */}\n                {scrollPosition > 0 && (\n                    <ArrowButton\n                        data-testid={getDataTestId(\"arrow-left\")}\n                        aria-hidden\n                        tabIndex={-1}\n                        $direction={\"left\"}\n                        $variant={variant}\n                        focusHighlight={false}\n                        focusOutline=\"none\"\n                        onClick={() => {\n                            handleArrowButtonClick(\"left\");\n                        }}\n                    >\n                        <ArrowIconLeft />\n                    </ArrowButton>\n                )}\n            </>\n        );\n    };\n\n    const renderArrowButtonRight = () => {\n        // Show the right ArrowButton when the scroll position is less than the maximum possible scroll value\n        if (\n            scrollPosition + clientWidth <\n            TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                adjustedEndTime,\n                cellWidth\n            )\n        ) {\n            return (\n                <ArrowButton\n                    data-testid={getDataTestId(\"arrow-right\")}\n                    aria-hidden\n                    tabIndex={-1}\n                    $direction={\"right\"}\n                    $variant={variant}\n                    focusHighlight={false}\n                    focusOutline=\"none\"\n                    onClick={() => {\n                        handleArrowButtonClick(\"right\");\n                    }}\n                >\n                    <ArrowIconRight />\n                </ArrowButton>\n            );\n        }\n\n        return <></>;\n    };\n\n    return (\n        <Container className={className}>\n            <TimeSlotBarContainer\n                data-testid={testId}\n                ref={barRef}\n                $variant={variant}\n            >\n                <TimeMarkerWrapper\n                    data-testid={getDataTestId(\"time-marker-wrapper\")}\n                    data-id=\"marker-wrapper\"\n                >\n                    {renderTimeMarkers()}\n                </TimeMarkerWrapper>\n                <div role=\"grid\" aria-label={slotsSummary} tabIndex={0}>\n                    <TimeSlotWrapper\n                        data-testid={getDataTestId(\"time-slot-wrapper\")}\n                        data-id=\"slot-wrapper\"\n                        role=\"row\"\n                    >\n                        {renderDefaultTimeSlots()}\n                        {renderTimeSlots()}\n                    </TimeSlotWrapper>\n                </div>\n            </TimeSlotBarContainer>\n            {renderArrowButtonLeft()}\n            {renderArrowButtonRight()}\n        </Container>\n    );\n};\n\nexport const TimeSlotBar = forwardRef<TimeSlotBarRef, TimeSlotBarProps>(\n    Component\n);\n"],"names":["TimeSlotBar","forwardRef","props","ref","testId","className","variant","startTime","endTime","slots","onSlotClick","onClick","styleAttributes","initialScrollTime","roundInitialScrollTime","barRef","useRef","scrollPosition","setScrollPosition","useState","clientWidth","setClientWidth","cellWidth","getCellWidth","adjustedStartTime","TimeSlotBarHelper","adjustTimeForMarker","adjustedEndTime","SCROLL_INCREMENT","useImperativeHandle","resetScroll","summary","slotsSummary","computedSlots","allSlots","useMemo","processSlots","start","end","useEffect","container","current","addEventListener","handleScroll","removeEventListener","scrollLeft","handleArrowButtonClick","direction","scrollBy","left","behavior","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","showFullEllipsis","slotWidth","getDataTestId","subStr","shouldDisplayLongTimeMarker","currentTime","isStartHourEven","isHour","minute","hour","TimeHelper","calculateScrollPosition","scrollTime","minTime","maxTime","interval","intervalWidth","options","roundToInterval","isVariant","v","_jsxs","Container","children","TimeSlotBarContainer","$variant","_jsx","TimeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","TimeMarker","format","$isLongMarker","TimeLabel","weight","formatHourlyDisplay","renderTimeMarkers","role","tabIndex","TimeSlotWrapper","backgroundColor","backgroundColor2","hoverBackgroundColor","hoverBackgroundColor2","styleType","calculateWidth","isClickable","TimeSlotBorder","TimeSlot","$width","$left","$styleType","$bgColor","$hoverBgColor","$hoverBgColor2","undefined","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","clickable","ariaLabel","color","slotOffset","showLabel","handleSlotClick","clickedSlot","evt","stopPropagation","_","__rest","style","$bgColor2","$clickable","VisuallyHidden","type","CellText","$slotWidth","$color","_Fragment","ArrowButton","focusHighlight","focusOutline","ArrowIconLeft","$direction","ArrowIconRight"],"mappings":"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"}
+{"version":3,"file":"time-slot-bar.js","sources":["../../src/time-slot-bar/time-slot-bar.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs, { type Dayjs } from \"dayjs\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { TimeSlot } from \"../shared/time-slot\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { getCellWidth, TimeSlotBarHelper } from \"./helper\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport TimeSlotDivider from \"./time-slot-divider\";\nimport TimeSlotItem from \"./time-slot-item\";\nimport type {\n    Direction,\n    TimeSlot as TTimeSlot,\n    TimeSlotBarProps,\n    TimeSlotBarRef,\n    TimeSlotBarVariant,\n} from \"./types\";\n\nconst CELL_DURATION = 30; // In minutes\n\nconst Component = (props: TimeSlotBarProps, ref: React.Ref<TimeSlotBarRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        \"data-testid\": testId,\n        className,\n        variant = \"default\",\n        startTime,\n        endTime,\n        slots,\n        onSlotClick,\n        onClick,\n        styleAttributes,\n        initialScrollTime,\n        roundInitialScrollTime = true,\n    } = props;\n    const barRef = useRef<HTMLDivElement>(null);\n    const [scrollPosition, setScrollPosition] = useState<number>(0);\n    const [clientWidth, setClientWidth] = useState<number>(0);\n    const cellWidth = getCellWidth(variant);\n\n    const adjustedStartTime = TimeSlotBarHelper.adjustTimeForMarker(\n        startTime,\n        \"start\"\n    );\n    const adjustedEndTime = TimeSlotBarHelper.adjustTimeForMarker(\n        endTime,\n        \"end\"\n    );\n\n    const SCROLL_INCREMENT = cellWidth * 2.5; // In px. Each scroll increment corresponds to 75mins\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    const { summary: slotsSummary, computedSlots: allSlots } = useMemo(() => {\n        return TimeSlotBarHelper.processSlots(\n            { start: adjustedStartTime, end: adjustedEndTime },\n            slots,\n            variant\n        );\n    }, [adjustedStartTime, adjustedEndTime, slots, variant]);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        const container = barRef.current;\n        if (container) {\n            container.addEventListener(\"scroll\", handleScroll);\n            // Initialize clientWidth on mount\n            setClientWidth(container.clientWidth);\n        }\n\n        return () => {\n            if (container) {\n                container.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, []);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, cellWidth, startTime, endTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleScroll = () => {\n        if (barRef.current) {\n            setScrollPosition(barRef.current.scrollLeft);\n        }\n    };\n\n    const handleArrowButtonClick = (direction: Direction) => {\n        if (barRef.current) {\n            barRef.current.scrollBy({\n                left:\n                    direction === \"left\" ? -SCROLL_INCREMENT : SCROLL_INCREMENT,\n                behavior: \"smooth\",\n            });\n        }\n    };\n\n    const handleResize = () => {\n        if (barRef.current) {\n            setClientWidth(barRef.current.clientWidth);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: barRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * NOTE: Special condition\n     * Show ellipsis only if the slotWidth is smaller or equal to\n     * 15min interval\n     */\n    const showFullEllipsis = (slotWidth: number) => {\n        return slotWidth <= cellWidth / 2;\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!testId) return undefined;\n        return `${testId}-${subStr}`;\n    };\n\n    /**\n     * Function to determine if a long time marker should be displayed\n     * For minified variant the long time marker is displayed every alternate hour\n     */\n    const shouldDisplayLongTimeMarker = (\n        currentTime: Dayjs,\n        isStartHourEven: boolean, // To determine if the first hour is even or odd for minified\n        variant: TimeSlotBarVariant\n    ) => {\n        const isHour = currentTime.minute() === 0;\n\n        if (variant === \"default\") {\n            return isHour;\n        }\n\n        const isAlternateHour =\n            isHour &&\n            (isStartHourEven\n                ? currentTime.hour() % 2 === 0\n                : currentTime.hour() % 2 === 1);\n\n        return isAlternateHour;\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (initialScrollTime && barRef.current && cellWidth > 0) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: adjustedStartTime,\n                maxTime: adjustedEndTime,\n                interval: CELL_DURATION,\n                intervalWidth: cellWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                barRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    const isVariant = (v: TimeSlotBarVariant) => {\n        if (variant === v) return true;\n        return false;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    // Render time markers\n    const renderTimeMarkers = () => {\n        const timeMarkers = [];\n        const startTimeFormatted = dayjs(adjustedStartTime, \"HH:mm\");\n        const endTimeFormatted = dayjs(adjustedEndTime, \"HH:mm\");\n\n        const isStartHourEven = startTimeFormatted.hour() % 2 === 0;\n\n        for (\n            let currentTime = startTimeFormatted;\n            currentTime.isBefore(endTimeFormatted);\n            currentTime = currentTime.add(CELL_DURATION, \"minute\")\n        ) {\n            const displayLongTimeMarker = shouldDisplayLongTimeMarker(\n                currentTime,\n                isStartHourEven,\n                variant\n            );\n\n            timeMarkers.push(\n                <div\n                    data-testid={`${currentTime.format(\"HH:mm\")}-marker`}\n                    key={currentTime.format(\"HH:mm\")}\n                    className={clsx(\n                        styles.timeMarker,\n                        variant === \"default\"\n                            ? styles.timeMarkerDefault\n                            : styles.timeMarkerMinified,\n                        displayLongTimeMarker && styles.timeMarkerLong\n                    )}\n                >\n                    {displayLongTimeMarker && (\n                        <Typography.BodyXS\n                            className={styles.timeLabel}\n                            weight=\"semibold\"\n                        >\n                            {TimeSlotBarHelper.formatHourlyDisplay(\n                                currentTime.format(\"HH:mm\")\n                            )}\n                        </Typography.BodyXS>\n                    )}\n                </div>\n            );\n        }\n        return timeMarkers;\n    };\n\n    // Render default time slot (aka background)\n    const renderDefaultTimeSlots = () => {\n        if (!styleAttributes) return;\n\n        const {\n            backgroundColor,\n            backgroundColor2,\n            hoverBackgroundColor,\n            hoverBackgroundColor2,\n            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && isVariant(\"default\");\n\n        return (\n            <>\n                <TimeSlotDivider variant={variant} />\n                <TimeSlotItem\n                    key={\"default-timeslot\"}\n                    variant={variant}\n                    dataTestId={getDataTestId(\"default-timeslot\")}\n                    slotWidth={slotWidth}\n                    slotOffset={0}\n                    onClick={isClickable ? onClick : undefined}\n                >\n                    <TimeSlot\n                        className={styles.timeSlotItemContent}\n                        styleType={styleType}\n                        bgColor={backgroundColor}\n                        bgColor2={backgroundColor2}\n                        hoverBgColor={hoverBackgroundColor}\n                        hoverBgColor2={hoverBackgroundColor2}\n                        clickable={isClickable}\n                    />\n                </TimeSlotItem>\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return allSlots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n                ariaLabel,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\n                hoverBackgroundColor,\n                hoverBackgroundColor2,\n            } = styleAttributes;\n\n            const slotWidth = TimeSlotBarHelper.calculateWidth(\n                slotStartTime,\n                slotEndTime,\n                cellWidth\n            );\n            const slotOffset = TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                slotStartTime,\n                cellWidth\n            );\n\n            const isClickable = clickable && variant === \"default\";\n            const showLabel = isVariant(\"default\") && label;\n\n            const handleSlotClick =\n                (clickedSlot: TTimeSlot & { ariaLabel?: string }) =>\n                (evt: React.MouseEvent<HTMLElement>) => {\n                    evt.stopPropagation();\n\n                    const { ariaLabel: _, ...slot } = clickedSlot;\n                    if (isClickable) onSlotClick(slot);\n                };\n\n            return (\n                <div key={id} role=\"gridcell\">\n                    <TimeSlotDivider\n                        variant={variant}\n                        left={slotOffset}\n                        dataTestId=\"start-border\"\n                    />\n                    <TimeSlotItem\n                        variant={variant}\n                        dataTestId={getDataTestId(`${id}-timeslot`)}\n                        slotWidth={slotWidth}\n                        slotOffset={slotOffset}\n                        color={color}\n                        onClick={handleSlotClick(slot)}\n                    >\n                        <TimeSlot\n                            className={styles.timeSlotItemContent}\n                            styleType={styleType}\n                            bgColor={backgroundColor}\n                            bgColor2={backgroundColor2}\n                            hoverBgColor={hoverBackgroundColor}\n                            hoverBgColor2={hoverBackgroundColor2}\n                            clickable={isClickable}\n                        >\n                            {!!ariaLabel && (\n                                <VisuallyHidden>\n                                    <button\n                                        type=\"button\" // overrides default type=\"submit\" when used with <form>\n                                        aria-disabled={!isClickable}\n                                        aria-label={ariaLabel}\n                                        onClick={handleSlotClick(slot)} // use `button` element native keyboard activation handling\n                                    />\n                                </VisuallyHidden>\n                            )}\n\n                            {showLabel && (\n                                <Typography.BodyXS\n                                    className={styles.cellText}\n                                    weight={\"semibold\"}\n                                    aria-hidden={!ariaLabel}\n                                >\n                                    {showFullEllipsis(slotWidth)\n                                        ? \"...\"\n                                        : label}\n                                </Typography.BodyXS>\n                            )}\n                        </TimeSlot>\n                    </TimeSlotItem>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotDivider\n                            variant={variant}\n                            dataTestId=\"end-border\"\n                            left={slotOffset + slotWidth}\n                        />\n                    )}\n                </div>\n            );\n        });\n    };\n\n    const renderArrowButton = (direction: Direction) => {\n        const isLeft = direction === \"left\";\n        const totalScrollableWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n        const hasContentOnLeft = scrollPosition > 0;\n        const hasContentOnRight =\n            scrollPosition + clientWidth < totalScrollableWidth;\n        const shouldShowArrow = isLeft ? hasContentOnLeft : hasContentOnRight;\n\n        if (!shouldShowArrow) return null;\n\n        const directionClass = isLeft\n            ? styles.arrowButtonLeft\n            : styles.arrowButtonRight;\n        const variantClass =\n            variant === \"default\"\n                ? styles.arrowButtonDefault\n                : styles.arrowButtonMinified;\n        const arrowIcon = isLeft ? (\n            <ChevronLeftIcon className={styles.arrowIcon} />\n        ) : (\n            <ChevronRightIcon className={styles.arrowIcon} />\n        );\n\n        return (\n            <ClickableIcon\n                data-testid={getDataTestId(`arrow-${direction}`)}\n                aria-hidden\n                tabIndex={-1}\n                className={clsx(\n                    styles.arrowButton,\n                    directionClass,\n                    variantClass\n                )}\n                focusHighlight={false}\n                focusOutline=\"none\"\n                onClick={() => {\n                    handleArrowButtonClick(direction);\n                }}\n            >\n                {arrowIcon}\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.container, className)}>\n            <div\n                data-testid={testId}\n                ref={barRef}\n                className={clsx(\n                    styles.timeSlotBarContainer,\n                    variant === \"default\"\n                        ? styles.containerDefault\n                        : styles.containerMinified\n                )}\n            >\n                <div\n                    className={styles.timeMarkerWrapper}\n                    data-testid={getDataTestId(\"time-marker-wrapper\")}\n                    data-id=\"marker-wrapper\"\n                >\n                    {renderTimeMarkers()}\n                </div>\n                <div role=\"grid\" aria-label={slotsSummary} tabIndex={0}>\n                    <div\n                        className={styles.timeSlotWrapper}\n                        data-testid={getDataTestId(\"time-slot-wrapper\")}\n                        data-id=\"slot-wrapper\"\n                        role=\"row\"\n                    >\n                        {renderDefaultTimeSlots()}\n                        {renderTimeSlots()}\n                    </div>\n                </div>\n            </div>\n            {renderArrowButton(\"left\")}\n            {renderArrowButton(\"right\")}\n        </div>\n    );\n};\n\nexport const TimeSlotBar = forwardRef<TimeSlotBarRef, TimeSlotBarProps>(\n    Component\n);\n"],"names":["TimeSlotBar","forwardRef","props","ref","testId","className","variant","startTime","endTime","slots","onSlotClick","onClick","styleAttributes","initialScrollTime","roundInitialScrollTime","barRef","useRef","scrollPosition","setScrollPosition","useState","clientWidth","setClientWidth","cellWidth","getCellWidth","adjustedStartTime","TimeSlotBarHelper","adjustTimeForMarker","adjustedEndTime","SCROLL_INCREMENT","useImperativeHandle","resetScroll","summary","slotsSummary","computedSlots","allSlots","useMemo","processSlots","start","end","useEffect","container","current","addEventListener","handleScroll","removeEventListener","scrollLeft","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","showFullEllipsis","slotWidth","getDataTestId","subStr","shouldDisplayLongTimeMarker","currentTime","isStartHourEven","isHour","minute","hour","TimeHelper","calculateScrollPosition","scrollTime","minTime","maxTime","interval","intervalWidth","options","roundToInterval","isVariant","v","renderArrowButton","direction","isLeft","totalScrollableWidth","calculateWidth","directionClass","styles.arrowButtonLeft","styles.arrowButtonRight","variantClass","styles.arrowButtonDefault","styles.arrowButtonMinified","arrowIcon","_jsx","ChevronLeftIcon","ChevronRightIcon","styles.arrowIcon","ClickableIcon","tabIndex","clsx","styles.arrowButton","focusHighlight","focusOutline","scrollBy","left","behavior","handleArrowButtonClick","children","_jsxs","styles.container","styles.timeSlotBarContainer","styles.containerDefault","styles.containerMinified","styles.timeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","format","styles.timeMarker","styles.timeMarkerDefault","styles.timeMarkerMinified","styles.timeMarkerLong","Typography","BodyXS","styles.timeLabel","weight","formatHourlyDisplay","renderTimeMarkers","role","styles.timeSlotWrapper","backgroundColor","backgroundColor2","hoverBackgroundColor","hoverBackgroundColor2","styleType","isClickable","_Fragment","TimeSlotDivider","TimeSlotItem","dataTestId","slotOffset","undefined","TimeSlot","styles.timeSlotItemContent","bgColor","bgColor2","hoverBgColor","hoverBgColor2","clickable","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","ariaLabel","color","showLabel","handleSlotClick","clickedSlot","evt","stopPropagation","_","__rest","VisuallyHidden","type","styles.cellText"],"mappings":"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"}

package/time-slot-bar/time-slot-bar.styles.d.ts

@@ -1,99 +1,37 @@
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-import type { Direction, SlotStyle, TimeSlotBarVariant } from "./types";
-export declare const getCellWidth: (variant: TimeSlotBarVariant) => 12 | 40;
-export declare const getCellHeight: (variant: TimeSlotBarVariant) => 12 | 40;
-interface ArrowStyleProps {
-    $direction?: Direction;
-    $variant: TimeSlotBarVariant;
-}
-export interface TimeSlotStyleProps {
-    $type?: "default" | "vertical";
-    $variant: TimeSlotBarVariant;
-    $width?: number;
-    $left?: number;
-    $styleType: SlotStyle;
-    $bgColor: string | ((props: V3_ThemeStyleProps) => string);
-    $bgColor2?: string | ((props: V3_ThemeStyleProps) => string);
-    $hoverBgColor?: string | ((props: V3_ThemeStyleProps) => string);
-    $hoverBgColor2?: string | ((props: V3_ThemeStyleProps) => string);
-    $clickable?: boolean;
-}
-interface CellTextStyleProps {
-    $slotWidth: number;
-    $color?: string;
-}
-interface TimeMarkerStyleProps {
-    $isLongMarker: boolean;
-    $variant: TimeSlotBarVariant;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof ArrowStyleProps> & ArrowStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof ArrowStyleProps> & ArrowStyleProps, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ArrowIconRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ArrowIconLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const TimeSlotBarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & {
-    $variant: TimeSlotBarVariant;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & {
-    $variant: TimeSlotBarVariant;
-}, never>>> & string;
-export declare const TimeMarkerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TimeSlotWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TimeMarker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TimeMarkerStyleProps> & TimeMarkerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TimeMarkerStyleProps> & TimeMarkerStyleProps, never>>> & string;
-export declare const TimeLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const TimeSlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TimeSlotStyleProps> & TimeSlotStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TimeSlotStyleProps> & TimeSlotStyleProps, never>>> & string;
-export declare const TimeSlotBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & {
-    $variant: TimeSlotBarVariant;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & {
-    $variant: TimeSlotBarVariant;
-}, never>>> & string;
-export declare const CellText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, keyof CellTextStyleProps> & CellTextStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, keyof CellTextStyleProps> & CellTextStyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const DEFAULT_CELL_SIZE = 40;
+export declare const MINIFIED_CELL_SIZE = 12;
+export declare const tokens: {
+    readonly item: {
+        readonly width: "--fds-internal-timeSlotBar-item-width";
+        readonly left: "--fds-internal-timeSlotBar-item-left";
+        readonly color: "--fds-internal-timeSlotBar-item-color";
+    };
+    readonly border: {
+        readonly left: "--fds-internal-timeSlotBar-border-left";
+    };
+};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const arrowButton: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonDefault: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonMinified: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonLeft: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonRight: import("@linaria/core").LinariaClassName;
+export declare const arrowIcon: import("@linaria/core").LinariaClassName;
+export declare const timeSlotBarContainer: import("@linaria/core").LinariaClassName;
+export declare const containerDefault: import("@linaria/core").LinariaClassName;
+export declare const containerMinified: import("@linaria/core").LinariaClassName;
+export declare const timeMarkerWrapper: import("@linaria/core").LinariaClassName;
+export declare const timeSlotWrapper: import("@linaria/core").LinariaClassName;
+export declare const timeMarker: import("@linaria/core").LinariaClassName;
+export declare const timeMarkerDefault: import("@linaria/core").LinariaClassName;
+export declare const timeMarkerMinified: import("@linaria/core").LinariaClassName;
+export declare const timeMarkerLong: import("@linaria/core").LinariaClassName;
+export declare const timeLabel: import("@linaria/core").LinariaClassName;
+export declare const timeSlotBorder: import("@linaria/core").LinariaClassName;
+export declare const timeSlotBorderDefault: import("@linaria/core").LinariaClassName;
+export declare const timeSlotBorderMinified: import("@linaria/core").LinariaClassName;
+export declare const cellText: import("@linaria/core").LinariaClassName;
+export declare const timeSlotItem: import("@linaria/core").LinariaClassName;
+export declare const timeSlotItemContent: import("@linaria/core").LinariaClassName;
+export declare const timeSlotItemDefault: import("@linaria/core").LinariaClassName;
+export declare const timeSlotItemMinified: import("@linaria/core").LinariaClassName;

package/time-slot-bar/time-slot-bar.styles.js

@@ -1,128 +1,2 @@
-import{ChevronLeftIcon as o}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as e}from"@lifesg/react-icons/chevron-right";import r,{css as i}from"styled-components";import{ClickableIcon as t}from"../shared/clickable-icon/clickable-icon.js";import{Typography as l}from"../typography/index.js";import{V3_Colour as n,V3_Shadow as a,V3_Border as g}from"../v3_theme/index.js";const $=1.25,s=o=>"minified"===o?12:40,d=o=>"minified"===o?12:40,p=r.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-`,c=r(t)`
-    z-index: 2;
-    position: absolute;
-    bottom: ${({$variant:o})=>"default"===o?"0.25rem":"0rem"};
-    background-color: ${n.bg};
-    box-shadow: ${a["md-strong"]};
-    border-radius: 100%;
-    padding: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-
-    ${o=>"right"===o.$direction?i`
-                  right: 0;
-              `:i`
-                  left: 0;
-              `}
-
-    > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &:focus {
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-`,h=r(e)`
-    width: 1rem;
-    height: 1rem;
-    color: ${n["icon-primary"]};
-`,b=r(o)`
-    font-size: 1rem;
-    color: ${n["icon-primary"]};
-`,m=r.div`
-    overflow: hidden;
-    flex-grow: 1;
-    position: relative;
-    height: ${({$variant:o})=>`${20+d(o)}px`};
-`,f=r.div`
-    position: relative;
-    white-space: nowrap;
-    height: ${$}rem;
-`,v=r.div`
-    display: flex;
-    white-space: nowrap;
-`,x=r.div`
-    display: inline-block;
-    width: ${({$variant:o})=>`${s(o)}px`};
-    position: relative;
-    border-left: ${g["width-010"]} ${g.solid}
-        ${n["border-stronger"]};
-    ${o=>{let e=0;switch(o.$variant){case"default":e=o.$isLongMarker?$:.625;break;case"minified":e=o.$isLongMarker?$:0;break;default:e=0}return i`
-            height: ${e}rem;
-        `}}
-`,w=r(l.BodyXS)`
-    color: ${n["text-subtle"]};
-    position: absolute;
-    bottom: 10%;
-    left: 10%;
-`,u=r.div`
-    ${o=>"vertical"===o.$type?i`
-                display: flex;
-                flex-grow: 1;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                margin: 1px 0px;
-            `:i`
-                position: absolute;
-                height: ${d(o.$variant)}px;
-                width: ${o.$width}px;
-                left: ${o.$left}px;
-            `}
-    background-color: ${({$bgColor:o})=>o};
-    cursor: ${({$clickable:o})=>o?"pointer":"default"};
-    ${({$hoverBgColor:o,$clickable:e})=>o&&e&&i`
-            &:hover {
-                background-color: ${o};
-            }
-        `}
-
-    ${o=>"stripes"===o.$styleType&&i`
-            background: repeating-linear-gradient(
-                135deg,
-                ${o.$bgColor2||n["bg-strongest"]} 0px,
-                ${o.$bgColor2||n["bg-strongest"]} 10px,
-                ${o.$bgColor||n["bg-stronger"]} 10px,
-                ${o.$bgColor||n["bg-stronger"]} 20px
-            );
-            ${(o.$hoverBgColor||o.$hoverBgColor2)&&o.$clickable&&i`
-                &:hover {
-                    background: repeating-linear-gradient(
-                        135deg,
-                        ${o.$hoverBgColor2||o.$bgColor2||n["bg-strongest"]}
-                            0px,
-                        ${o.$hoverBgColor2||o.$bgColor2||n["bg-strongest"]}
-                            10px,
-                        ${o.$hoverBgColor||o.$bgColor||n["bg-stronger"]}
-                            10px,
-                        ${o.$hoverBgColor||o.$bgColor||n["bg-stronger"]}
-                            20px
-                    );
-                }
-            `}
-        `}
-`,y=r.div`
-    position: absolute;
-    top: ${$}rem;
-    height: ${({$variant:o})=>`${d(o)}px`};
-    z-index: 1;
-    border-right: ${g["width-010"]} ${g.solid}
-        ${n["border-stronger"]};
-`,k=r(l.BodyXS)`
-    color: ${o=>o.$color||n.text(o)};
-    position: absolute;
-    bottom: 0;
-    padding-left: 4px;
-    padding-bottom: 4px;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;export{c as ArrowButton,b as ArrowIconLeft,h as ArrowIconRight,k as CellText,p as Container,w as TimeLabel,x as TimeMarker,f as TimeMarkerWrapper,u as TimeSlot,m as TimeSlotBarContainer,y as TimeSlotBorder,v as TimeSlotWrapper,d as getCellHeight,s as getCellWidth};
+import"./time-slot-bar.styles_wigbyd.css";const t=40,e=12,a={item:{width:"--fds-internal-timeSlotBar-item-width",left:"--fds-internal-timeSlotBar-item-left",color:"--fds-internal-timeSlotBar-item-color"},border:{left:"--fds-internal-timeSlotBar-border-left"}},i="cleto2",l="a18tsztd",r="a9mraed",o="aljok3x",c="av3ykv8",d="as5dred",m="a195ar7o",s="t1dmizys",n="c1w55l7b",f="cqcczbk",y="t10z816e",b="t1ukhl9h",h="t1iag8mt",k="t1iopuc",p="tbp961o",v="t7d7vtm",w="te99x8g",x="t1e383ch",z="tyac3mh",g="twiecck",B="c1yanpy9",S="tfycdxa",_="t11y98ca",u="t1kzvg2s",A="t4axcvt";export{t as DEFAULT_CELL_SIZE,e as MINIFIED_CELL_SIZE,l as arrowButton,r as arrowButtonDefault,c as arrowButtonLeft,o as arrowButtonMinified,d as arrowButtonRight,m as arrowIcon,B as cellText,i as container,n as containerDefault,f as containerMinified,w as timeLabel,h as timeMarker,k as timeMarkerDefault,v as timeMarkerLong,p as timeMarkerMinified,y as timeMarkerWrapper,s as timeSlotBarContainer,x as timeSlotBorder,z as timeSlotBorderDefault,g as timeSlotBorderMinified,S as timeSlotItem,_ as timeSlotItemContent,u as timeSlotItemDefault,A as timeSlotItemMinified,b as timeSlotWrapper,a as tokens};
 //# sourceMappingURL=time-slot-bar.styles.js.map

package/time-slot-bar/time-slot-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.styles.js","sources":["../../src/time-slot-bar/time-slot-bar.styles.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Shadow } from \"../v3_theme\";\nimport type { V3_ThemeStyleProps } from \"../v3_theme/types\";\nimport type { Direction, SlotStyle, TimeSlotBarVariant } from \"./types\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// Function to get the height of a cell in px\nexport const getCellHeight = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\n\ninterface ArrowStyleProps {\n    $direction?: Direction;\n    $variant: TimeSlotBarVariant;\n}\n\nexport interface TimeSlotStyleProps {\n    $type?: \"default\" | \"vertical\";\n    $variant: TimeSlotBarVariant;\n    $width?: number;\n    $left?: number;\n    $styleType: SlotStyle;\n    $bgColor: string | ((props: V3_ThemeStyleProps) => string);\n    $bgColor2?: string | ((props: V3_ThemeStyleProps) => string);\n    $hoverBgColor?: string | ((props: V3_ThemeStyleProps) => string);\n    $hoverBgColor2?: string | ((props: V3_ThemeStyleProps) => string);\n    $clickable?: boolean;\n}\n\ninterface CellTextStyleProps {\n    $slotWidth: number;\n    $color?: string;\n}\n\ninterface TimeMarkerStyleProps {\n    $isLongMarker: boolean;\n    $variant: TimeSlotBarVariant;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const ArrowButton = styled(ClickableIcon)<ArrowStyleProps>`\n    z-index: 2;\n    position: absolute;\n    bottom: ${({ $variant }) => ($variant === \"default\" ? \"0.25rem\" : \"0rem\")};\n    background-color: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    ${(props) =>\n        props.$direction === \"right\"\n            ? css`\n                  right: 0;\n              `\n            : css`\n                  left: 0;\n              `}\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const ArrowIconRight = styled(ChevronRightIcon)`\n    width: 1rem;\n    height: 1rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const ArrowIconLeft = styled(ChevronLeftIcon)`\n    font-size: 1rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const TimeSlotBarContainer = styled.div<{\n    $variant: TimeSlotBarVariant;\n}>`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n    height: ${({ $variant }) =>\n        `${MAX_LINE_HEIGHT * 16 + getCellHeight($variant)}px`};\n`;\n\nexport const TimeMarkerWrapper = styled.div`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const TimeMarker = styled.div<TimeMarkerStyleProps>`\n    display: inline-block;\n    width: ${({ $variant }) => `${getCellWidth($variant)}px`};\n    position: relative;\n    border-left: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border-stronger\"]};\n    ${(props) => {\n        let markerHeight = 0;\n\n        switch (props.$variant) {\n            case \"default\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0.625;\n                break;\n            case \"minified\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0;\n                break;\n            default:\n                markerHeight = 0;\n                break;\n        }\n\n        return css`\n            height: ${markerHeight}rem;\n        `;\n    }}\n`;\n\nexport const TimeLabel = styled(Typography.BodyXS)`\n    color: ${V3_Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const TimeSlot = styled.div<TimeSlotStyleProps>`\n    ${(props) => {\n        if (props.$type === \"vertical\") {\n            return css`\n                display: flex;\n                flex-grow: 1;\n                align-items: center;\n                justify-content: center;\n                width: 100%;\n                margin: 1px 0px;\n            `;\n        } else {\n            return css`\n                position: absolute;\n                height: ${getCellHeight(props.$variant)}px;\n                width: ${props.$width}px;\n                left: ${props.$left}px;\n            `;\n        }\n    }}\n    background-color: ${({ $bgColor }) => $bgColor};\n    cursor: ${({ $clickable }) => ($clickable ? \"pointer\" : \"default\")};\n    ${({ $hoverBgColor, $clickable }) =>\n        $hoverBgColor &&\n        $clickable &&\n        css`\n            &:hover {\n                background-color: ${$hoverBgColor};\n            }\n        `}\n\n    ${(props) =>\n        props.$styleType === \"stripes\" &&\n        css`\n            background: repeating-linear-gradient(\n                135deg,\n                ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 0px,\n                ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 10px,\n                ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 10px,\n                ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 20px\n            );\n            ${(props.$hoverBgColor || props.$hoverBgColor2) &&\n            props.$clickable &&\n            css`\n                &:hover {\n                    background: repeating-linear-gradient(\n                        135deg,\n                        ${props.$hoverBgColor2 ||\n                            props.$bgColor2 ||\n                            V3_Colour[\"bg-strongest\"]}\n                            0px,\n                        ${props.$hoverBgColor2 ||\n                            props.$bgColor2 ||\n                            V3_Colour[\"bg-strongest\"]}\n                            10px,\n                        ${props.$hoverBgColor ||\n                            props.$bgColor ||\n                            V3_Colour[\"bg-stronger\"]}\n                            10px,\n                        ${props.$hoverBgColor ||\n                            props.$bgColor ||\n                            V3_Colour[\"bg-stronger\"]}\n                            20px\n                    );\n                }\n            `}\n        `}\n`;\n\nexport const TimeSlotBorder = styled.div<{ $variant: TimeSlotBarVariant }>`\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    height: ${({ $variant }) => `${getCellHeight($variant)}px`};\n    z-index: 1;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border-stronger\"]};\n`;\n\nexport const CellText = styled(Typography.BodyXS)<CellTextStyleProps>`\n    color: ${(props) => props.$color || V3_Colour.text(props)};\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n"],"names":["MAX_LINE_HEIGHT","getCellWidth","variant","getCellHeight","Container","styled","div","ArrowButton","ClickableIcon","$variant","V3_Colour","bg","V3_Shadow","props","$direction","css","ArrowIconRight","ChevronRightIcon","ArrowIconLeft","ChevronLeftIcon","TimeSlotBarContainer","TimeMarkerWrapper","TimeSlotWrapper","TimeMarker","V3_Border","solid","markerHeight","$isLongMarker","TimeLabel","Typography","BodyXS","TimeSlot","$type","$width","$left","$bgColor","$clickable","$hoverBgColor","$styleType","$bgColor2","$hoverBgColor2","TimeSlotBorder","CellText","$color","text"],"mappings":"iYAUA,MAAMA,EAAkB,KAOXC,EAAgBC,GACT,aAAZA,EACO,GAEA,GAKFC,EAAiBD,GACV,aAAZA,EACO,GAEA,GAwCFE,EAAYC,EAAOC,GAAG;;;;EAMtBC,EAAcF,EAAOG,EAA+B;;;cAGnD,EAAGC,cAA6B,YAAbA,EAAyB,UAAY;wBAC9CC,EAAUC;kBAChBC,EAAU;;;;;;MAMrBC,GACsB,UAArBA,EAAMC,WACAC,CAAG;;gBAGHA,CAAG;;;;;;;;;;;;;EAeJC,EAAiBX,EAAOY,EAAiB;;;aAGzCP,EAAU;EAGVQ,EAAgBb,EAAOc,EAAgB;;aAEvCT,EAAU;EAGVU,EAAuBf,EAAOC,GAEzC;;;;cAIY,EAAGG,cACT,GAAGT,GAAuBG,EAAcM;EAGnCY,EAAoBhB,EAAOC,GAAG;;;cAG7BN;EAGDsB,EAAkBjB,EAAOC,GAAG;;;EAK5BiB,EAAalB,EAAOC,GAAyB;;aAE7C,EAAGG,cAAe,GAAGR,EAAaQ;;mBAE5Be,EAAU,gBAAgBA,EAAUC;UAC7Cf,EAAU;MACbG,IACC,IAAIa,EAAe,EAEnB,OAAQb,EAAMJ,UACV,IAAK,UACDiB,EAAeb,EAAMc,cAAgB3B,EAAkB,KACvD,MACJ,IAAK,WACD0B,EAAeb,EAAMc,cAAgB3B,EAAkB,EACvD,MACJ,QACI0B,EAAe,EAIvB,OAAOX,CAAG;sBACIW;SACb;EAIIE,EAAYvB,EAAOwB,EAAWC,OAAO;aACrCpB,EAAU;;;;EAMVqB,EAAW1B,EAAOC,GAAuB;MAC/CO,GACqB,aAAhBA,EAAMmB,MACCjB,CAAG;;;;;;;cASHA,CAAG;;0BAEIZ,EAAcU,EAAMJ;yBACrBI,EAAMoB;wBACPpB,EAAMqB;;wBAIN,EAAGC,cAAeA;cAC5B,EAAGC,gBAAkBA,EAAa,UAAY;MACtD,EAAGC,gBAAeD,gBAChBC,GACAD,GACArB,CAAG;;oCAEyBsB;;;;MAI7BxB,GACsB,YAArBA,EAAMyB,YACNvB,CAAG;;;kBAGOF,EAAM0B,WAAa7B,EAAU;kBAC7BG,EAAM0B,WAAa7B,EAAU;kBAC7BG,EAAMsB,UAAYzB,EAAU;kBAC5BG,EAAMsB,UAAYzB,EAAU;;eAE/BG,EAAMwB,eAAiBxB,EAAM2B,iBAChC3B,EAAMuB,YACNrB,CAAG;;;;0BAIWF,EAAM2B,gBACJ3B,EAAM0B,WACN7B,EAAU;;0BAEZG,EAAM2B,gBACJ3B,EAAM0B,WACN7B,EAAU;;0BAEZG,EAAMwB,eACJxB,EAAMsB,UACNzB,EAAU;;0BAEZG,EAAMwB,eACJxB,EAAMsB,UACNzB,EAAU;;;;;;EAQzB+B,EAAiBpC,EAAOC,GAAqC;;WAE/DN;cACG,EAAGS,cAAe,GAAGN,EAAcM;;oBAE7Be,EAAU,gBAAgBA,EAAUC;UAC9Cf,EAAU;EAGPgC,EAAWrC,EAAOwB,EAAWC,OAA2B;aACvDjB,GAAUA,EAAM8B,QAAUjC,EAAUkC,KAAK/B;;;;;;;;;"}
+{"version":3,"file":"time-slot-bar.styles.js","sources":["../../src/time-slot-bar/time-slot-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow } from \"../theme\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\nexport const DEFAULT_CELL_SIZE = 40;\nexport const MINIFIED_CELL_SIZE = 12;\n\nexport const tokens = {\n    item: {\n        width: \"--fds-internal-timeSlotBar-item-width\",\n        left: \"--fds-internal-timeSlotBar-item-left\",\n        color: \"--fds-internal-timeSlotBar-item-color\",\n    },\n    border: {\n        left: \"--fds-internal-timeSlotBar-border-left\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const arrowButton = css`\n    z-index: 2;\n    position: absolute;\n    bottom: 0rem;\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const arrowButtonDefault = css`\n    bottom: 0.25rem;\n`;\n\nexport const arrowButtonMinified = css`\n    bottom: 0rem;\n`;\n\nexport const arrowButtonLeft = css`\n    left: 0;\n`;\n\nexport const arrowButtonRight = css`\n    right: 0;\n`;\n\nexport const arrowIcon = css`\n    width: 1rem;\n    height: 1rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const timeSlotBarContainer = css`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n`;\n\nexport const containerDefault = css`\n    height: ${MAX_LINE_HEIGHT * 16 + DEFAULT_CELL_SIZE}px;\n`;\n\nexport const containerMinified = css`\n    height: ${MAX_LINE_HEIGHT * 16 + MINIFIED_CELL_SIZE}px;\n`;\n\nexport const timeMarkerWrapper = css`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const timeMarker = css`\n    display: inline-block;\n    position: relative;\n    border-left: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeMarkerDefault = css`\n    width: ${DEFAULT_CELL_SIZE}px;\n    height: 0.625rem;\n`;\n\nexport const timeMarkerMinified = css`\n    width: ${MINIFIED_CELL_SIZE}px;\n    height: 0rem;\n`;\n\nexport const timeMarkerLong = css`\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeLabel = css`\n    color: ${Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const timeSlotBorder = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.border.left}: initial;\n\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    z-index: 1;\n    left: var(${tokens.border.left});\n    border-right: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeSlotBorderDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotBorderMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n\nexport const cellText = css`\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: inherit;\n`;\n\nexport const timeSlotItem = css`\n    /* reset variables to prevent leaking to child components */\n    ${tokens.item.left}: initial;\n    ${tokens.item.width}: initial;\n    ${tokens.item.color}: initial;\n\n    position: absolute;\n    color: var(${tokens.item.color});\n    left: var(${tokens.item.left});\n    width: var(${tokens.item.width});\n`;\n\nexport const timeSlotItemContent = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const timeSlotItemDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotItemMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n"],"names":["DEFAULT_CELL_SIZE","MINIFIED_CELL_SIZE","tokens","item","width","left","color","border","container","arrowButton","arrowButtonDefault","arrowButtonMinified","arrowButtonLeft","arrowButtonRight","arrowIcon","timeSlotBarContainer","containerDefault","containerMinified","timeMarkerWrapper","timeSlotWrapper","timeMarker","timeMarkerDefault","timeMarkerMinified","timeMarkerLong","timeLabel","timeSlotBorder","timeSlotBorderDefault","timeSlotBorderMinified","cellText","timeSlotItem","timeSlotItemContent","timeSlotItemDefault","timeSlotItemMinified"],"mappings":"uEAKO,MAAMA,EAAoB,GACpBC,EAAqB,GAErBC,EAAS,CAClBC,KAAM,CACFC,MAAO,wCACPC,KAAM,uCACNC,MAAO,yCAEXC,OAAQ,CACJF,KAAM,2CAIDG,EAAS,SAMTC,EAAW,WAsBXC,EAAkB,UAIlBC,EAAmB,UAInBC,EAAe,UAIfC,EAAgB,UAIhBC,EAAS,WAMTC,EAAoB,WAMpBC,EAAgB,WAIhBC,EAAiB,UAIjBC,EAAiB,WAMjBC,EAAe,WAKfC,EAAU,WAOVC,EAAiB,UAKjBC,EAAkB,UAKlBC,EAAc,UAIdC,EAAS,UAOTC,EAAc,WAYdC,EAAqB,UAIrBC,EAAsB,UAItBC,EAAQ,WAYRC,EAAY,UAYZC,EAAmB,WAKnBC,EAAmB,WAInBC,EAAoB"}

package/time-slot-bar/time-slot-bar.styles_wigbyd.css

@@ -0,0 +1,25 @@
+.cleto2{position:relative;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;}
+.a18tsztd{z-index:2;position:absolute;bottom:0rem;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-strong);border-radius:100%;padding:0.5rem;width:2rem;height:2rem;}.a18tsztd >div{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;}.a18tsztd:focus{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
+.a9mraed{bottom:0.25rem;}
+.aljok3x{bottom:0rem;}
+.av3ykv8{left:0;}
+.as5dred{right:0;}
+.a195ar7o{width:1rem;height:1rem;color:var(--fds-colour-icon-primary);}
+.t1dmizys{overflow:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;}
+.c1w55l7b{height:60px;}
+.cqcczbk{height:32px;}
+.t10z816e{position:relative;white-space:nowrap;height:1.25rem;}
+.t1ukhl9h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;white-space:nowrap;}
+.t1iag8mt{display:inline-block;position:relative;border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.t1iopuc{width:40px;height:0.625rem;}
+.tbp961o{width:12px;height:0rem;}
+.t7d7vtm{height:1.25rem;}
+.te99x8g{color:var(--fds-colour-text-subtle);position:absolute;bottom:10%;left:10%;}
+.t1e383ch{--fds-internal-timeSlotBar-border-left:initial;position:absolute;top:1.25rem;z-index:1;left:var(--fds-internal-timeSlotBar-border-left);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.tyac3mh{height:40px;}
+.twiecck{height:12px;}
+.c1yanpy9{position:absolute;bottom:0;padding-left:4px;padding-bottom:4px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;}
+.tfycdxa{--fds-internal-timeSlotBar-item-left:initial;--fds-internal-timeSlotBar-item-width:initial;--fds-internal-timeSlotBar-item-color:initial;position:absolute;color:var(--fds-internal-timeSlotBar-item-color);left:var(--fds-internal-timeSlotBar-item-left);width:var(--fds-internal-timeSlotBar-item-width);}
+.t11y98ca{width:100%;height:100%;}
+.t1kzvg2s{height:40px;}
+.t4axcvt{height:12px;}

package/time-slot-bar/time-slot-divider.d.ts

@@ -0,0 +1,8 @@
+import type { TimeSlotBarVariant } from "./types";
+interface TimeSlotDividerProps {
+    variant: TimeSlotBarVariant;
+    left?: number;
+    dataTestId?: string;
+}
+declare const TimeSlotDivider: ({ variant, left, dataTestId, }: TimeSlotDividerProps) => import("react/jsx-runtime").JSX.Element;
+export default TimeSlotDivider;

package/time-slot-bar/time-slot-divider.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import t from"clsx";import{useRef as r}from"react";import"../theme/theme-provider/index.js";import{formatUnitValue as o}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as m}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as s,timeSlotBorder as i,timeSlotBorderDefault as a,timeSlotBorderMinified as p}from"./time-slot-bar.styles.js";const l=({variant:l,left:d,dataTestId:n})=>{const u=r(null);return m(u,{[s.border.left]:void 0===d?void 0:o(d,"px")}),e("div",{ref:u,"data-testid":n,className:t(i,"default"===l?a:p)})};export{l as default};
+//# sourceMappingURL=time-slot-divider.js.map

package/time-slot-bar/time-slot-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-divider.js","sources":["../../src/time-slot-bar/time-slot-divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotDividerProps {\n    variant: TimeSlotBarVariant;\n    left?: number;\n    dataTestId?: string;\n}\n\nconst TimeSlotDivider = ({\n    variant,\n    left,\n    dataTestId,\n}: TimeSlotDividerProps) => {\n    const dividerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(dividerRef, {\n        [styles.tokens.border.left]:\n            left === undefined ? undefined : formatUnitValue(left, \"px\"),\n    });\n\n    return (\n        <div\n            ref={dividerRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotBorder,\n                variant === \"default\"\n                    ? styles.timeSlotBorderDefault\n                    : styles.timeSlotBorderMinified\n            )}\n        />\n    );\n};\n\nexport default TimeSlotDivider;\n"],"names":["TimeSlotDivider","variant","left","dataTestId","dividerRef","useRef","useApplyStyle","styles.tokens","border","undefined","formatUnitValue","_jsx","ref","className","clsx","styles.timeSlotBorder","styles.timeSlotBorderDefault","styles.timeSlotBorderMinified"],"mappings":"smBAaA,MAAMA,EAAkB,EACpBC,UACAC,OACAC,iBAEA,MAAMC,EAAaC,EAAuB,MAO1C,OALAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,OAAON,WACTO,IAATP,OAAqBO,EAAYC,EAAgBR,EAAM,QAI3DS,EAAA,MAAA,CACIC,IAAKR,EAAU,cACFD,EACbU,UAAWC,EACPC,EACY,YAAZd,EACMe,EACAC,IAEZ"}

package/time-slot-bar/time-slot-item.d.ts

@@ -0,0 +1,13 @@
+import { type MouseEvent } from "react";
+import type { TimeSlotBarVariant } from "./types";
+interface TimeSlotItemProps {
+    children: React.ReactNode;
+    color?: string;
+    dataTestId?: string;
+    onClick?: (() => void) | ((evt: MouseEvent<HTMLElement>) => void);
+    slotOffset: number;
+    slotWidth: number;
+    variant: TimeSlotBarVariant;
+}
+declare const TimeSlotItem: ({ children, color, dataTestId, onClick, slotOffset, slotWidth, variant, }: TimeSlotItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TimeSlotItem;

package/time-slot-bar/time-slot-item.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";import e from"clsx";import{useRef as o}from"react";import"../theme/theme-provider/index.js";import{formatUnitValue as r}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as m}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as s}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as i,timeSlotItem as l,timeSlotItemDefault as p,timeSlotItemMinified as a}from"./time-slot-bar.styles.js";const d=({children:d,color:n,dataTestId:c,onClick:h,slotOffset:f,slotWidth:u,variant:j})=>{const x=o(null);return s(x,{[i.item.width]:r(u,"px"),[i.item.left]:r(f,"px"),[i.item.color]:n||m.text}),t("div",{ref:x,"data-testid":c,className:e(l,"default"===j?p:a),onClick:h,children:d})};export{d as default};
+//# sourceMappingURL=time-slot-item.js.map

package/time-slot-bar/time-slot-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-item.js","sources":["../../src/time-slot-bar/time-slot-item.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type MouseEvent, useRef } from \"react\";\n\nimport { Colour, formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotItemProps {\n    children: React.ReactNode;\n    color?: string;\n    dataTestId?: string;\n    onClick?: (() => void) | ((evt: MouseEvent<HTMLElement>) => void);\n    slotOffset: number;\n    slotWidth: number;\n    variant: TimeSlotBarVariant;\n}\n\nconst TimeSlotItem = ({\n    children,\n    color,\n    dataTestId,\n    onClick,\n    slotOffset,\n    slotWidth,\n    variant,\n}: TimeSlotItemProps) => {\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(itemRef, {\n        [styles.tokens.item.width]: formatUnitValue(slotWidth, \"px\"),\n        [styles.tokens.item.left]: formatUnitValue(slotOffset, \"px\"),\n        [styles.tokens.item.color]: color || Colour.text,\n    });\n\n    return (\n        <div\n            ref={itemRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotItem,\n                variant === \"default\"\n                    ? styles.timeSlotItemDefault\n                    : styles.timeSlotItemMinified\n            )}\n            onClick={onClick}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default TimeSlotItem;\n"],"names":["TimeSlotItem","children","color","dataTestId","onClick","slotOffset","slotWidth","variant","itemRef","useRef","useApplyStyle","styles.tokens","item","width","formatUnitValue","left","Colour","text","_jsx","ref","className","clsx","styles.timeSlotItem","styles.timeSlotItemDefault","styles.timeSlotItemMinified"],"mappings":"inBAiBA,MAAMA,EAAe,EACjBC,WACAC,QACAC,aACAC,UACAC,aACAC,YACAC,cAEA,MAAMC,EAAUC,EAAuB,MAQvC,OANAC,EAAcF,EAAS,CACnB,CAACG,EAAcC,KAAKC,OAAQC,EAAgBR,EAAW,MACvD,CAACK,EAAcC,KAAKG,MAAOD,EAAgBT,EAAY,MACvD,CAACM,EAAcC,KAAKV,OAAQA,GAASc,EAAOC,OAI5CC,EAAA,MAAA,CACIC,IAAKX,EAAO,cACCL,EACbiB,UAAWC,EACPC,EACY,YAAZf,EACMgB,EACAC,GAEVpB,QAASA,EAAOH,SAEfA,GACC"}

package/time-slot-bar/types.d.ts

@@ -1,7 +1,7 @@
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-export type SlotStyle = "default" | "stripes";
-export type Direction = "right" | "left";
+import type { SlotStyle } from "../shared/time-slot/types";
 export type TimeSlotBarVariant = "minified" | "default";
+export type Direction = "right" | "left";
+export type { SlotStyle } from "../shared/time-slot/types";
 export interface TimeSlotBarRef {
     /** Resets the scroll position to the initialScrollTime if provided */
     resetScroll: () => void;
@@ -12,13 +12,13 @@ interface TimeSlotBarStyleAttributes {
     /** The label color */
     color?: string | undefined;
     /** The background color */
-    backgroundColor: string | ((props: V3_ThemeStyleProps) => string);
+    backgroundColor: string;
     /** The secondary background color. Used in conjunction if styleType is "stripes" */
-    backgroundColor2?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    backgroundColor2?: string | undefined;
     /** The background color on hover */
-    hoverBackgroundColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    hoverBackgroundColor?: string | undefined;
     /** The secondary background color on hover. Used in conjunction if styleType is "stripes" */
-    hoverBackgroundColor2?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    hoverBackgroundColor2?: string | undefined;
 }
 export interface TimeSlotBarProps {
     "data-testid"?: string | undefined;
@@ -53,4 +53,3 @@ export interface TimeSlot {
     clickable?: boolean | undefined;
     styleAttributes: TimeSlotBarStyleAttributes;
 }
-export {};