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

package/cjs/shared/standalone-date-input/standalone-date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone-date-input.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport * as styles from \"./standalone-date-input.styles\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n    | StartInputNames[number]\n    | EndInputNames[number]\n    | \"none\";\n\ninterface Props {\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    hideInputKeyboard?: boolean | undefined;\n    names: StartInputNames | EndInputNames;\n    value: string | undefined;\n    hoverValue?: string | undefined;\n    focused: boolean;\n    placeholder?: string | undefined;\n    label?: string | undefined;\n    inputLabels?: string[] | undefined;\n    onChange: (value: string) => void;\n    onFocus?: ((event: React.FocusEvent) => void) | undefined;\n    onBlur?: ((valid: boolean) => void) | undefined;\n}\n\nexport interface StandaloneDateInputRef {\n    ref: React.RefObject<HTMLDivElement>;\n    resetPlaceholder: () => void;\n    resetInput: () => void;\n    focusYearRef: () => void;\n}\n\nexport const Component = (\n    {\n        disabled,\n        readOnly,\n        names,\n        value,\n        focused,\n        hoverValue,\n        placeholder,\n        label,\n        onChange,\n        onFocus,\n        onBlur,\n        hideInputKeyboard,\n        inputLabels = [\"Date\", \"Month\", \"Year\"],\n    }: Props,\n    ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n    const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n    const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n    const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n    const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n    const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const dayInputRef = useRef<HTMLInputElement>(null);\n    const monthInputRef = useRef<HTMLInputElement>(null);\n    const yearInputRef = useRef<HTMLInputElement>(null);\n\n    const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n        parseToInputValues(hoverValue);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n        setDayValue(day);\n        setMonthValue(month);\n        setYearValue(year);\n\n        // re-focus on day input if all 3 inputs get cleared while typing\n        if (\n            !day &&\n            !month &&\n            !year &&\n            nodeRef.current &&\n            nodeRef.current.contains(document.activeElement)\n        )\n            dayInputRef.current?.focus();\n    }, [value]);\n\n    useEffect(() => {\n        // clear internal focus state\n        if (!focused) {\n            setCurrentFocus(\"none\");\n        }\n\n        // ensure at least one input is focused\n        if (focused) {\n            setHidePlaceholder(true);\n\n            if (\n                nodeRef.current &&\n                !nodeRef.current.contains(document.activeElement)\n            ) {\n                dayInputRef.current?.focus();\n            }\n        }\n    }, [focused]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            ref: nodeRef,\n            resetPlaceholder() {\n                setHidePlaceholder(false);\n            },\n            resetInput() {\n                const [day = \"\", month = \"\", year = \"\"] =\n                    parseToInputValues(value);\n                setDayValue(day);\n                setMonthValue(month);\n                setYearValue(year);\n            },\n            focusYearRef() {\n                yearInputRef.current?.focus();\n            },\n        }),\n        [setDayValue, setMonthValue, setYearValue, value]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSectionClick = () => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (\n            nodeRef.current &&\n            !nodeRef.current.contains(document.activeElement)\n        ) {\n            dayInputRef.current?.focus();\n        }\n    };\n\n    const handleSectionFocus = (event: React.FocusEvent) => {\n        if (disabled) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (!focused) {\n            onFocus?.(event);\n        }\n    };\n\n    const handlePlaceholderClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        dayInputRef.current?.focus();\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n        const targetName = event.target.name as FieldType;\n        setCurrentFocus(targetName);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const [dayName, monthName, yearName] = names;\n        const date = {\n            [dayName]: dayValueRef.current,\n            [monthName]: monthValueRef.current,\n            [yearName]: yearValueRef.current,\n        };\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = date[targetName];\n\n        // pad single digits for day and month inputs\n\n        const paddedValue =\n            targetName !== yearName\n                ? StringHelper.padValue(targetValue, true)\n                : targetValue;\n\n        switch (targetName) {\n            case dayName:\n                date[dayName] = paddedValue;\n                setDayValue(paddedValue);\n                break;\n            case monthName:\n                date[monthName] = paddedValue;\n                setMonthValue(paddedValue);\n                break;\n            case yearName:\n            default:\n                break;\n        }\n\n        const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n        const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n        const isPadded = targetValue !== paddedValue;\n\n        if (isValid && isPadded) {\n            onChange(value);\n        }\n\n        if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n            // entire field was blurred\n            setCurrentFocus(\"none\");\n            onBlur?.(isEmpty || isValid);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (hoverValue) {\n            // do not modify inputs when selecting date from another source\n            return;\n        }\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n        const date = {\n            day: dayValue,\n            month: monthValue,\n            year: yearValue,\n        };\n\n        switch (targetName) {\n            case names[0]:\n                date.day = targetValue;\n                setDayValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    monthInputRef.current?.focus();\n                }\n                break;\n            case names[1]:\n                date.month = targetValue;\n                setMonthValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    yearInputRef.current?.focus();\n                }\n                break;\n            case names[2]:\n                date.year = targetValue;\n                setYearValue(targetValue);\n                break;\n            default:\n                break;\n        }\n\n        if (!date.day && !date.month && !date.year) {\n            onChange(\"\");\n            return;\n        }\n\n        const value = `${date.year}-${date.month}-${date.day}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n        if (isValid) {\n            onChange(value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === names[1] && monthValue.length === 0) {\n                dayInputRef.current?.focus();\n            }\n\n            if (currentFocus === names[2] && yearValue.length === 0) {\n                monthInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function parseToInputValues(stringVal: string | undefined) {\n        if (!stringVal) {\n            return [undefined, undefined, undefined];\n        } else {\n            const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n            if (!sanitized) {\n                return [undefined, undefined, undefined];\n            }\n\n            const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n            return [\n                StringHelper.padValue(day.date().toString()),\n                StringHelper.padValue((day.month() + 1).toString()),\n                day.year().toString(),\n            ];\n        }\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPlaceholder = () => {\n        if (value || readOnly || !placeholder) {\n            return;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.placeholder,\n                    disabled && styles.placeholderDisabled,\n                    hidePlaceholder && styles.placeholderHide\n                )}\n                onMouseDown={handlePlaceholderClick}\n            >\n                {placeholder}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            role=\"group\"\n            aria-label={label}\n            className={styles.inputSection}\n            onClick={handleSectionClick}\n            onFocus={handleSectionFocus}\n        >\n            <div ref={nodeRef} className={styles.inputContainer}>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.dayInputSizer\n                    )}\n                >\n                    <input\n                        ref={dayInputRef}\n                        name={names[0]}\n                        maxLength={2}\n                        value={hoverDayValue ?? dayValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[0]}-input`}\n                        aria-label={inputLabels[0]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        dayValue.length === 0 && styles.dividerInactive,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.monthInputSizer\n                    )}\n                >\n                    <input\n                        ref={monthInputRef}\n                        name={names[1]}\n                        maxLength={2}\n                        value={hoverMonthValue ?? monthValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[1]}-input`}\n                        aria-label={inputLabels[1]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        monthValue.length === 0 && styles.dividerInactive,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.yearInputSizer\n                    )}\n                >\n                    <input\n                        ref={yearInputRef}\n                        name={names[2]}\n                        maxLength={4}\n                        value={hoverYearValue ?? yearValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{4}\"\n                        data-testid={`${names[2]}-input`}\n                        aria-label={inputLabels[2]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n            </div>\n            {renderPlaceholder()}\n        </div>\n    );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","role","className","styles.inputSection","onClick","children","styles.inputContainer","_jsx","clsx","styles.inputSizerBase","styles.dayInputSizer","maxLength","type","pattern","tabIndex","autoComplete","styles.baseInput","styles.baseInputHover","styles.divider","styles.dividerInactive","styles.dividerHover","styles.monthInputSizer","onKeyDown","styles.yearInputSizer","styles.placeholder","styles.placeholderDisabled","styles.placeholderHide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"standalone-date-input.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport * as styles from \"./standalone-date-input.styles\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n    | StartInputNames[number]\n    | EndInputNames[number]\n    | \"none\";\n\ninterface Props {\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    hideInputKeyboard?: boolean | undefined;\n    names: StartInputNames | EndInputNames;\n    value: string | undefined;\n    hoverValue?: string | undefined;\n    focused: boolean;\n    placeholder?: string | undefined;\n    label?: string | undefined;\n    inputLabels?: string[] | undefined;\n    onChange: (value: string) => void;\n    onFocus?: ((event: React.FocusEvent) => void) | undefined;\n    onBlur?: ((valid: boolean) => void) | undefined;\n}\n\nexport interface StandaloneDateInputRef {\n    ref: React.RefObject<HTMLDivElement>;\n    resetPlaceholder: () => void;\n    resetInput: () => void;\n    focusYearRef: () => void;\n}\n\nexport const Component = (\n    {\n        disabled,\n        readOnly,\n        names,\n        value,\n        focused,\n        hoverValue,\n        placeholder,\n        label,\n        onChange,\n        onFocus,\n        onBlur,\n        hideInputKeyboard,\n        inputLabels = [\"Date\", \"Month\", \"Year\"],\n    }: Props,\n    ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n    const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n    const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n    const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n    const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n    const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const dayInputRef = useRef<HTMLInputElement>(null);\n    const monthInputRef = useRef<HTMLInputElement>(null);\n    const yearInputRef = useRef<HTMLInputElement>(null);\n\n    const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n        parseToInputValues(hoverValue);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n        setDayValue(day);\n        setMonthValue(month);\n        setYearValue(year);\n\n        // re-focus on day input if all 3 inputs get cleared while typing\n        if (\n            !day &&\n            !month &&\n            !year &&\n            nodeRef.current &&\n            nodeRef.current.contains(document.activeElement)\n        )\n            dayInputRef.current?.focus();\n    }, [value]);\n\n    useEffect(() => {\n        // clear internal focus state\n        if (!focused) {\n            setCurrentFocus(\"none\");\n        }\n\n        // ensure at least one input is focused\n        if (focused) {\n            setHidePlaceholder(true);\n\n            if (\n                nodeRef.current &&\n                !nodeRef.current.contains(document.activeElement)\n            ) {\n                dayInputRef.current?.focus();\n            }\n        }\n    }, [focused]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            ref: nodeRef,\n            resetPlaceholder() {\n                setHidePlaceholder(false);\n            },\n            resetInput() {\n                const [day = \"\", month = \"\", year = \"\"] =\n                    parseToInputValues(value);\n                setDayValue(day);\n                setMonthValue(month);\n                setYearValue(year);\n            },\n            focusYearRef() {\n                yearInputRef.current?.focus();\n            },\n        }),\n        [setDayValue, setMonthValue, setYearValue, value]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSectionClick = () => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (\n            nodeRef.current &&\n            !nodeRef.current.contains(document.activeElement)\n        ) {\n            dayInputRef.current?.focus();\n        }\n    };\n\n    const handleSectionFocus = (event: React.FocusEvent) => {\n        if (disabled) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (!focused) {\n            onFocus?.(event);\n        }\n    };\n\n    const handlePlaceholderClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        dayInputRef.current?.focus();\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n        const targetName = event.target.name as FieldType;\n        setCurrentFocus(targetName);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const [dayName, monthName, yearName] = names;\n        const date = {\n            [dayName]: dayValueRef.current,\n            [monthName]: monthValueRef.current,\n            [yearName]: yearValueRef.current,\n        };\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = date[targetName];\n\n        // pad single digits for day and month inputs\n\n        const paddedValue =\n            targetName !== yearName\n                ? StringHelper.padValue(targetValue, true)\n                : targetValue;\n\n        switch (targetName) {\n            case dayName:\n                date[dayName] = paddedValue;\n                setDayValue(paddedValue);\n                break;\n            case monthName:\n                date[monthName] = paddedValue;\n                setMonthValue(paddedValue);\n                break;\n            case yearName:\n            default:\n                break;\n        }\n\n        const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n        const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n        const isPadded = targetValue !== paddedValue;\n\n        if (isValid && isPadded) {\n            onChange(value);\n        }\n\n        if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n            // entire field was blurred\n            setCurrentFocus(\"none\");\n            onBlur?.(isEmpty || isValid);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (hoverValue) {\n            // do not modify inputs when selecting date from another source\n            return;\n        }\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n        const date = {\n            day: dayValue,\n            month: monthValue,\n            year: yearValue,\n        };\n\n        switch (targetName) {\n            case names[0]:\n                date.day = targetValue;\n                setDayValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    monthInputRef.current?.focus();\n                }\n                break;\n            case names[1]:\n                date.month = targetValue;\n                setMonthValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    yearInputRef.current?.focus();\n                }\n                break;\n            case names[2]:\n                date.year = targetValue;\n                setYearValue(targetValue);\n                break;\n            default:\n                break;\n        }\n\n        if (!date.day && !date.month && !date.year) {\n            onChange(\"\");\n            return;\n        }\n\n        const value = `${date.year}-${date.month}-${date.day}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n        if (isValid) {\n            onChange(value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === names[1] && monthValue.length === 0) {\n                dayInputRef.current?.focus();\n            }\n\n            if (currentFocus === names[2] && yearValue.length === 0) {\n                monthInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function parseToInputValues(stringVal: string | undefined) {\n        if (!stringVal) {\n            return [undefined, undefined, undefined];\n        } else {\n            const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n            if (!sanitized) {\n                return [undefined, undefined, undefined];\n            }\n\n            const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n            return [\n                StringHelper.padValue(day.date().toString()),\n                StringHelper.padValue((day.month() + 1).toString()),\n                day.year().toString(),\n            ];\n        }\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPlaceholder = () => {\n        if (value || readOnly || !placeholder) {\n            return;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.placeholder,\n                    disabled && styles.placeholderDisabled,\n                    hidePlaceholder && styles.placeholderHide\n                )}\n                onMouseDown={handlePlaceholderClick}\n            >\n                {placeholder}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            role=\"group\"\n            aria-label={label}\n            className={styles.inputSection}\n            onClick={handleSectionClick}\n            onFocus={handleSectionFocus}\n        >\n            <div ref={nodeRef} className={styles.inputContainer}>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.dayInputSizer\n                    )}\n                >\n                    <input\n                        ref={dayInputRef}\n                        name={names[0]}\n                        maxLength={2}\n                        value={hoverDayValue ?? dayValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[0]}-input`}\n                        aria-label={inputLabels[0]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.monthInputSizer\n                    )}\n                >\n                    <input\n                        ref={monthInputRef}\n                        name={names[1]}\n                        maxLength={2}\n                        value={hoverMonthValue ?? monthValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[1]}-input`}\n                        aria-label={inputLabels[1]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.yearInputSizer\n                    )}\n                >\n                    <input\n                        ref={yearInputRef}\n                        name={names[2]}\n                        maxLength={4}\n                        value={hoverYearValue ?? yearValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{4}\"\n                        data-testid={`${names[2]}-input`}\n                        aria-label={inputLabels[2]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n            </div>\n            {renderPlaceholder()}\n        </div>\n    );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","role","className","styles.inputSection","onClick","children","styles.inputContainer","_jsx","clsx","styles.inputSizerBase","styles.dayInputSizer","maxLength","type","pattern","tabIndex","autoComplete","styles.baseInput","styles.baseInputHover","styles.divider","styles.dividerHover","styles.monthInputSizer","onKeyDown","styles.yearInputSizer","styles.placeholder","styles.placeholderDisabled","styles.placeholderHide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}

package/cjs/shared/standalone-date-input/standalone-date-input.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./standalone-date-input.styles_1mqophx.css");exports.baseInput="b11lxf0g",exports.baseInputHover="b1owk99f",exports.dayInputSizer="d8v7mt3",exports.divider="d1hrb2q6",exports.dividerHover="d12gn07d",exports.dividerInactive="d1ednuur",exports.inputContainer="iay8f6w",exports.inputSection="i48x656",exports.inputSizerBase="i1tizbfo",exports.monthInputSizer="m1nfq8ts",exports.placeholder="pzrktuq",exports.placeholderDisabled="p1jcopfd",exports.placeholderHide="p10ypbkc",exports.yearInputSizer="y1kizbwh";
+"use strict";require("./standalone-date-input.styles_1m0da43.css");exports.baseInput="b11lxf0g",exports.baseInputHover="b1owk99f",exports.dayInputSizer="d1tizbfo",exports.divider="d1hrb2q6",exports.dividerHover="d1ednuur",exports.inputContainer="i12gn07d",exports.inputSection="i48x656",exports.inputSizerBase="iay8f6w",exports.monthInputSizer="m8v7mt3",exports.placeholder="p1kizbwh",exports.placeholderDisabled="pzrktuq",exports.placeholderHide="p1jcopfd",exports.yearInputSizer="y1nfq8ts";
 //# sourceMappingURL=standalone-date-input.styles.js.map

package/cjs/shared/standalone-date-input/standalone-date-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone-date-input.styles.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSection = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    flex: 1;\n`;\n\nexport const baseInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    text-align: center;\n    position: absolute;\n    inset: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const baseInputHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const divider = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const dividerInactive = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const dividerHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const inputSizerBase = css`\n    display: inline-block;\n    position: relative;\n\n    &::after {\n        ${Font[\"body-baseline-regular\"]}\n        visibility: hidden;\n        pointer-events: none;\n        white-space: pre;\n    }\n`;\n\nexport const dayInputSizer = css`\n    &::after {\n        content: \"DD\";\n    }\n`;\n\nexport const monthInputSizer = css`\n    &::after {\n        content: \"MM\";\n    }\n`;\n\nexport const yearInputSizer = css`\n    &::after {\n        content: \"YYYY\";\n    }\n`;\n\nexport const placeholder = css`\n    ${Font[\"body-baseline-regular\"]}\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text-subtler\"]};\n    position: absolute;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const placeholderDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n`;\n\nexport const placeholderHide = css`\n    display: none;\n`;\n"],"names":[],"mappings":"iIAesB,kCAyCK,iCAkCD,0BA9BN,gCAQK,mCAJG,kCAQD,+BAjEF,iCAuEE,mCAkBC,+BAYJ,sCAWQ,mCAKJ,kCAtBD"}
+{"version":3,"file":"standalone-date-input.styles.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSection = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    flex: 1;\n`;\n\nexport const baseInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    text-align: center;\n    position: absolute;\n    inset: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const baseInputHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const divider = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const dividerHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const inputSizerBase = css`\n    display: inline-block;\n    position: relative;\n\n    &::after {\n        ${Font[\"body-baseline-regular\"]}\n        visibility: hidden;\n        pointer-events: none;\n        white-space: pre;\n    }\n`;\n\nexport const dayInputSizer = css`\n    &::after {\n        content: \"DD\";\n    }\n`;\n\nexport const monthInputSizer = css`\n    &::after {\n        content: \"MM\";\n    }\n`;\n\nexport const yearInputSizer = css`\n    &::after {\n        content: \"YYYY\";\n    }\n`;\n\nexport const placeholder = css`\n    ${Font[\"body-baseline-regular\"]}\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text-subtler\"]};\n    position: absolute;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const placeholderDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n`;\n\nexport const placeholderHide = css`\n    display: none;\n`;\n"],"names":[],"mappings":"iIAesB,kCAyCK,iCA+BD,2BA3BN,gCAKK,kCAIE,gCA9DF,iCAoEE,kCAkBC,8BAYJ,uCAWQ,kCAKJ,kCAtBD"}

package/{shared/standalone-date-input/standalone-date-input.styles_1mqophx.css → cjs/shared/standalone-date-input/standalone-date-input.styles_1m0da43.css}

@@ -1,14 +1,13 @@
 .i48x656{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;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;}
 .b11lxf0g{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;text-align:center;position:absolute;inset:0;--webkit-appearance:none;--moz-appearance:textfield;}.b11lxf0g:disabled{color:var(--fds-colour-text-subtler);}.b11lxf0g:disabled:hover{cursor:not-allowed;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-webkit-outer-spin-button,.b11lxf0g::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::placeholder{color:var(--fds-colour-text-subtler);}
 .b1owk99f{color:var(--fds-colour-text-subtler);}
-.d1hrb2q6{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
-.d1ednuur{color:var(--fds-colour-text);}
-.d12gn07d{color:var(--fds-colour-text-subtler);}
-.iay8f6w{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:var(--fds-spacing-4);}
-.i1tizbfo{display:inline-block;position:relative;}.i1tizbfo::after{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);visibility:hidden;pointer-events:none;white-space:pre;}
-.d8v7mt3::after{content:"DD";}
-.m1nfq8ts::after{content:"MM";}
-.y1kizbwh::after{content:"YYYY";}
-.pzrktuq{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);background-color:var(--fds-colour-bg);color:var(--fds-colour-text-subtler);position:absolute;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;width:100%;height:100%;}
-.p1jcopfd{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
-.p10ypbkc{display:none;}
+.d1hrb2q6{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.d1ednuur{color:var(--fds-colour-text-subtler);}
+.i12gn07d{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:var(--fds-spacing-4);}
+.iay8f6w{display:inline-block;position:relative;}.iay8f6w::after{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);visibility:hidden;pointer-events:none;white-space:pre;}
+.d1tizbfo::after{content:"DD";}
+.m8v7mt3::after{content:"MM";}
+.y1nfq8ts::after{content:"YYYY";}
+.p1kizbwh{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);background-color:var(--fds-colour-bg);color:var(--fds-colour-text-subtler);position:absolute;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;width:100%;height:100%;}
+.pzrktuq{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
+.p1jcopfd{display:none;}

package/cjs/shared/time-slot/time-slot.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react");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 s=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var o=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./time-slot.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(r);const u=t.forwardRef((({className:r,"data-testid":i,bgColor:u,bgColor2:n,children:d,clickable:c,hoverBgColor:m,hoverBgColor2:q,nonClickableCursor:h,onClick:j,styleType:k,tabIndex:p},v)=>{const y=t.useRef(null);s.useApplyStyle(y,{[l.tokens.slot.bgColor]:u,[l.tokens.slot.bgColor2]:n,[l.tokens.slot.hoverBgColor]:m,[l.tokens.slot.hoverBgColor2]:q,[l.tokens.slot.cursor]:h});return e.jsx("div",{ref:o.mergeRefs(y,v),className:a.default(l.timeSlot,r),"data-style-type":k,"data-clickable":!!c,"data-hoverable":!!(c&&("stripes"===k?m||q:m)),onClick:j,"data-testid":i,tabIndex:p,children:d})}));exports.TimeSlot=u;
+//# sourceMappingURL=time-slot.js.map

package/cjs/shared/time-slot/time-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.js","sources":["../../../../src/shared/time-slot/time-slot.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { mergeRefs } from \"../../util\";\nimport * as styles from \"./time-slot.styles\";\nimport type { SlotStyle } from \"./types\";\n\nexport interface TimeSlotProps {\n    \"data-testid\"?: string | undefined;\n    bgColor: string;\n    bgColor2?: string | undefined;\n    children?: ReactNode;\n    className?: string | undefined;\n    clickable?: boolean | undefined;\n    hoverBgColor?: string | undefined;\n    hoverBgColor2?: string | undefined;\n    nonClickableCursor?: \"default\" | \"not-allowed\" | undefined;\n    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n    styleType: SlotStyle;\n    tabIndex?: number | undefined;\n}\n\nconst Component = (\n    {\n        className,\n        \"data-testid\": dataTestId,\n        bgColor,\n        bgColor2,\n        children,\n        clickable,\n        hoverBgColor,\n        hoverBgColor2,\n        nonClickableCursor,\n        onClick,\n        styleType,\n        tabIndex,\n    }: TimeSlotProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const slotRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(slotRef, {\n        [styles.tokens.slot.bgColor]: bgColor,\n        [styles.tokens.slot.bgColor2]: bgColor2,\n        [styles.tokens.slot.hoverBgColor]: hoverBgColor,\n        [styles.tokens.slot.hoverBgColor2]: hoverBgColor2,\n        [styles.tokens.slot.cursor]: nonClickableCursor,\n    });\n\n    const isHoverable = () => {\n        if (!clickable) {\n            return false;\n        }\n\n        if (styleType === \"stripes\") {\n            return !!(hoverBgColor || hoverBgColor2);\n        }\n\n        return !!hoverBgColor;\n    };\n\n    return (\n        <div\n            ref={mergeRefs(slotRef, ref)}\n            className={clsx(styles.timeSlot, className)}\n            data-style-type={styleType}\n            data-clickable={!!clickable}\n            data-hoverable={isHoverable()}\n            onClick={onClick}\n            data-testid={dataTestId}\n            tabIndex={tabIndex}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const TimeSlot = forwardRef(Component);\n"],"names":["TimeSlot","forwardRef","className","dataTestId","bgColor","bgColor2","children","clickable","hoverBgColor","hoverBgColor2","nonClickableCursor","onClick","styleType","tabIndex","ref","slotRef","useRef","useApplyStyle","styles.tokens","slot","cursor","_jsx","mergeRefs","clsx","styles.timeSlot"],"mappings":"mzBAwBA,MAuDaA,EAAWC,EAAAA,YAvDN,EAEVC,YACA,cAAeC,EACfC,UACAC,WACAC,WACAC,YACAC,eACAC,gBACAC,qBACAC,UACAC,YACAC,YAEJC,KAEA,MAAMC,EAAUC,EAAAA,OAAuB,MAEvCC,EAAAA,cAAcF,EAAS,CACnB,CAACG,EAAAA,OAAcC,KAAKf,SAAUA,EAC9B,CAACc,EAAAA,OAAcC,KAAKd,UAAWA,EAC/B,CAACa,EAAAA,OAAcC,KAAKX,cAAeA,EACnC,CAACU,EAAAA,OAAcC,KAAKV,eAAgBA,EACpC,CAACS,EAAAA,OAAcC,KAAKC,QAASV,IAejC,OACIW,EAAAA,WACIP,IAAKQ,EAAAA,UAAUP,EAASD,GACxBZ,UAAWqB,EAAAA,QAAKC,EAAAA,SAAiBtB,GAAU,kBAC1BU,EAAS,mBACRL,EAAS,oBAhB1BA,IAIa,YAAdK,EACUJ,GAAgBC,EAGrBD,IAULG,QAASA,gBACIR,EACbU,SAAUA,WAETP,GACC"}

package/cjs/shared/time-slot/time-slot.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./time-slot.styles_1r9na3f.css");exports.timeSlot="tsti7hb",exports.tokens={slot:{bgColor:"--fds-internal-timeSlot-slot-bgColor",bgColor2:"--fds-internal-timeSlot-slot-bgColor2",hoverBgColor:"--fds-internal-timeSlot-slot-hoverBgColor",hoverBgColor2:"--fds-internal-timeSlot-slot-hoverBgColor2",cursor:"--fds-internal-timeSlot-slot-cursor"}};
+//# sourceMappingURL=time-slot.styles.js.map

package/cjs/shared/time-slot/time-slot.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.styles.js","sources":["../../../../src/shared/time-slot/time-slot.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const tokens = {\n    slot: {\n        bgColor: \"--fds-internal-timeSlot-slot-bgColor\",\n        bgColor2: \"--fds-internal-timeSlot-slot-bgColor2\",\n        hoverBgColor: \"--fds-internal-timeSlot-slot-hoverBgColor\",\n        hoverBgColor2: \"--fds-internal-timeSlot-slot-hoverBgColor2\",\n        cursor: \"--fds-internal-timeSlot-slot-cursor\",\n    },\n};\n\nexport const timeSlot = css`\n    ${tokens.slot.bgColor}: ${Colour[\"bg-stronger\"]};\n    ${tokens.slot.bgColor2}: ${Colour[\"bg-strongest\"]};\n    ${tokens.slot.hoverBgColor}: ${Colour[\"bg-stronger\"]};\n    ${tokens.slot.hoverBgColor2}: ${Colour[\"bg-strongest\"]};\n\n    cursor: var(${tokens.slot.cursor}, default);\n\n    &[data-clickable=\"true\"] {\n        cursor: pointer;\n    }\n\n    &[data-style-type=\"default\"] {\n        background-color: var(${tokens.slot.bgColor});\n    }\n\n    &[data-style-type=\"default\"][data-hoverable=\"true\"] {\n        &:hover {\n            background-color: var(${tokens.slot.hoverBgColor});\n        }\n    }\n\n    &[data-style-type=\"stripes\"] {\n        background: repeating-linear-gradient(\n            135deg,\n            var(${tokens.slot.bgColor2}) 0px,\n            var(${tokens.slot.bgColor2}) 6px,\n            var(${tokens.slot.bgColor}) 6px,\n            var(${tokens.slot.bgColor}) 12px\n        );\n    }\n\n    &[data-style-type=\"stripes\"][data-hoverable=\"true\"] {\n        &:hover {\n            background: repeating-linear-gradient(\n                135deg,\n                var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n                    0px,\n                var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n                    6px,\n                var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n                    6px,\n                var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n                    12px\n            );\n        }\n    }\n`;\n"],"names":["slot","bgColor","bgColor2","hoverBgColor","hoverBgColor2","cursor"],"mappings":"wGAcqB,yBAVC,CAClBA,KAAM,CACFC,QAAS,uCACTC,SAAU,wCACVC,aAAc,4CACdC,cAAe,6CACfC,OAAQ"}

package/cjs/shared/time-slot/time-slot.styles_1r9na3f.css

@@ -0,0 +1,17 @@
+.tsti7hb{--fds-internal-timeSlot-slot-bgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-bgColor2:var(--fds-colour-bg-strongest);--fds-internal-timeSlot-slot-hoverBgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-hoverBgColor2:var(--fds-colour-bg-strongest);cursor:var(--fds-internal-timeSlot-slot-cursor, default);}.tsti7hb[data-clickable="true"]{cursor:pointer;}.tsti7hb[data-style-type="default"]{background-color:var(--fds-internal-timeSlot-slot-bgColor);}.tsti7hb[data-style-type="default"][data-hoverable="true"]:hover{background-color:var(--fds-internal-timeSlot-slot-hoverBgColor);}.tsti7hb[data-style-type="stripes"]{background:repeating-linear-gradient(
+            135deg,
+            var(--fds-internal-timeSlot-slot-bgColor2) 0px,
+            var(--fds-internal-timeSlot-slot-bgColor2) 6px,
+            var(--fds-internal-timeSlot-slot-bgColor) 6px,
+            var(--fds-internal-timeSlot-slot-bgColor) 12px
+        );}.tsti7hb[data-style-type="stripes"][data-hoverable="true"]:hover{background:repeating-linear-gradient(
+                135deg,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    0px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    12px
+            );}

package/cjs/smart-app-banner/smart-app-banner.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),n=require("react"),t=require("./smart-app-banner.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",a="smart-app-banner";const i=s(n).default.forwardRef((function(n,s){const{className:i,show:o,href:l,content:c,offset:d=0,icon:p=r,animated:u=!1,onDismiss:f,onClick:h}=n,{title:m,message:j,buttonLabel:x,iconAriaLabel:b,buttonAriaLabel:g,numberOfStars:C}=c,$={dismiss:"Close banner",icon:null!=b?b:"",cta:null!=g?g:x},y=e=>{e.stopPropagation(),window.open(l,"_blank","noreferrer"),null==h||h()};return e.jsx(e.Fragment,{children:o&&e.jsxs(t.SmartAppBannerContainer,{ref:s,$isAnimated:u,$offset:d,className:i,children:[e.jsxs(t.ProceedContainer,{onClick:y,id:`${a}-proceed`,"data-testid":`${a}-proceed-container`,children:[e.jsx(t.BannerIcon,{src:p,alt:$.icon}),e.jsxs(t.TextContainer,{children:[e.jsx(t.Title,{children:m}),e.jsx(t.Description,{children:j}),(()=>{if(isNaN(C)||C<0)return;const n=[],s=C-Math.floor(C)>=.4;for(let s=0;s<Math.floor(C);s++)n.push(e.jsx(t.Star,{"aria-hidden":!0},`star${s}`));if(s&&n.push(e.jsx(t.StarHalf,{"aria-hidden":!0},"halfstar")),n.length<5){const s=5-n.length;for(let r=0;r<s;r++)n.push(e.jsx(t.StarEmpty,{"aria-hidden":!0},`emptystar${r}`))}return e.jsx(t.RatingContainer,{role:"group","aria-label":`A rating of ${C} out of 5 stars`,children:n.slice(0,5)})})()]}),e.jsx(t.ButtonContainer,{children:e.jsx(t.StyledButton,{type:"button",onClick:y,"aria-label":$.cta,children:x})})]}),e.jsx(t.DismissContainer,{onClick:f,id:`${a}-dismiss`,"data-testid":`${a}-dismiss-container`,children:e.jsx(t.DismissButton,{"aria-label":$.dismiss,children:e.jsx(t.Cross,{})})})]})})}));exports.SmartAppBanner=i;
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/star"),a=require("@lifesg/react-icons/star-fill"),t=require("@lifesg/react-icons/star-half"),i=require("clsx"),n=require("react"),o=require("../button/button.js"),l=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js");var c=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 u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var d=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var m=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var p=require("./smart-app-banner.styles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=h(i);const f="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",g="smart-app-banner";const q=h(n).default.forwardRef((function(i,h){const{className:q,show:x,href:b,content:y,offset:v=0,icon:C=f,animated:N=!1,onDismiss:k,onClick:A}=i,{title:B,message:I,buttonLabel:$,iconAriaLabel:S,buttonAriaLabel:w,numberOfStars:L}=y,T=n.useRef(null),M=n.useContext(c.ThemeContext),R="dark"===(null==M?void 0:M.mode);u.useApplyStyle(T,{[p.tokens.container.top]:`${v}px`});const D={dismiss:"Close banner",icon:null!=S?S:"",cta:null!=w?w:$},F=e=>{e.stopPropagation(),window.open(b,"_blank","noreferrer"),null==A||A()};return e.jsx(e.Fragment,{children:x&&e.jsxs("div",{ref:m.mergeRefs(T,h),"data-testid":g,className:j.default(p.smartAppBannerContainer,R?p.smartAppBannerContainerDark:p.smartAppBannerContainerLight,N&&p.smartAppBannerContainerAnimated,q),children:[e.jsxs("div",{className:p.proceedContainer,onClick:F,id:`${g}-proceed`,"data-testid":`${g}-proceed-container`,children:[e.jsx("img",{className:p.bannerIcon,src:C,alt:D.icon}),e.jsxs("div",{className:p.textContainer,children:[e.jsx(d.Typography.BodySM,{className:p.title,children:B}),e.jsx(d.Typography.BodyXS,{className:p.description,children:I}),(()=>{if(isNaN(L)||L<0)return;const r=[],i=L-Math.floor(L)>=.4;for(let s=0;s<Math.floor(L);s++)r.push(e.jsx(a.StarFillIcon,{"aria-hidden":!0,className:p.starIcon},`star${s}`));if(i&&r.push(e.jsx(t.StarHalfIcon,{"aria-hidden":!0,className:p.starIcon},"halfstar")),r.length<5){const a=5-r.length;for(let t=0;t<a;t++)r.push(e.jsx(s.StarIcon,{"aria-hidden":!0,className:p.starIcon},`emptystar${t}`))}return e.jsx("div",{className:p.ratingContainer,role:"group","aria-label":`A rating of ${L} out of 5 stars`,"data-testid":`${g}-star-rating`,children:r.slice(0,5)})})()]}),e.jsx("div",{className:p.buttonContainer,children:e.jsx(o.Button,{className:p.button,type:"button",onClick:F,"aria-label":D.cta,sizeType:"small",children:$})})]}),e.jsx("div",{className:p.dismissContainer,onClick:k,id:`${g}-dismiss`,"data-testid":`${g}-dismiss-container`,children:e.jsx(l.ClickableIcon,{className:p.dismissButton,"aria-label":D.dismiss,children:e.jsx(r.CrossIcon,{className:p.cross})})})]})})}));exports.SmartAppBanner=q;
 //# sourceMappingURL=smart-app-banner.js.map

package/cjs/smart-app-banner/smart-app-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.js","sources":["../../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    BannerIcon,\n    ButtonContainer,\n    Cross,\n    Description,\n    DismissButton,\n    DismissContainer,\n    ProceedContainer,\n    RatingContainer,\n    SmartAppBannerContainer,\n    Star,\n    StarEmpty,\n    StarHalf,\n    StyledButton,\n    TextContainer,\n    Title,\n} from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(<Star key={`star${i}`} aria-hidden />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} aria-hidden />);\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} aria-hidden />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <RatingContainer\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </RatingContainer>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt={ariaLabels.icon} />\n                        <TextContainer>\n                            <Title>{title}</Title>\n                            <Description>{message}</Description>\n                            {generateStarRating()}\n                        </TextContainer>\n                        <ButtonContainer>\n                            <StyledButton\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label={ariaLabels.dismiss}>\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                </SmartAppBannerContainer>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","ProceedContainer","id","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","role","slice","generateStarRating","ButtonContainer","StyledButton","type","DismissContainer","DismissButton","Cross"],"mappings":"qLAqBA,MAAMA,EACF,2EAEEC,EAAK,mBAgIJ,MAAMC,OAAiBC,QAAMC,YA7HpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAa,CACfC,QAAS,eACTX,KAAMO,QAAAA,EAAiB,GACvBK,IAAKJ,QAAAA,EAAmBF,GAKtBO,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKpB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAuCf,OACIe,MAAAC,EAAAA,SAAA,CAAAC,SACKxB,GACGyB,EAAAA,KAACC,EAAAA,wBAAuB,CACpB5B,IAAKA,EAAG6B,YACKtB,EAAQuB,QACZzB,EACTJ,UAAWA,EAASyB,SAAA,CAEpBC,EAAAA,KAACI,EAAAA,iBAAgB,CACbtB,QAASU,EACTa,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAAA,CAEtCF,MAACS,EAAAA,WAAU,CAACC,IAAK5B,EAAM6B,IAAKnB,EAAWV,OACvCqB,OAACS,EAAAA,cAAa,CAAAV,SAAA,CACVF,EAAAA,IAACa,QAAK,CAAAX,SAAEhB,IACRc,EAAAA,IAACc,EAAAA,YAAW,CAAAZ,SAAEf,IAjDX,MACvB,GAAI4B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKrB,MAACsB,EAAAA,KAAI,CAAA,eAAA,GAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKrB,EAAAA,IAACuB,WAAQ,CAAA,eAAA,GAAM,aAE1BP,EAAMQ,OAhEA,EAgEoB,CAC1B,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKrB,MAAC0B,EAAAA,UAAS,CAAA,eAAA,GAAM,YAAYN,KAE/C,CAGA,OACIpB,EAAAA,IAAC2B,EAAAA,gBAAe,CACZC,KAAK,QAAO,aACA,eAAerC,mBAAyCW,SAEnEc,EAAMa,MAAM,EA7EX,IA8EY,EAsBDC,MAEL9B,EAAAA,IAAC+B,EAAAA,gBAAe,CAAA7B,SACZF,EAAAA,IAACgC,EAAAA,aAAY,CACTC,KAAK,SACLhD,QAASU,EAAW,aACRH,EAAWE,IAAGQ,SAEzBd,SAIbY,EAAAA,IAACkC,EAAAA,iBAAgB,CACbjD,QAASD,EACTwB,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAEtCF,EAAAA,IAACmC,EAAAA,cAAa,CAAA,aAAa3C,EAAWC,QAAOS,SACzCF,EAAAA,IAACoC,EAAAA,MAAK,CAAA,WAOlC"}
+{"version":3,"file":"smart-app-banner.js","sources":["../../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport clsx from \"clsx\";\nimport React, { useContext, useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const isDark = theme?.mode === \"dark\";\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.top]: `${offset}px`,\n    });\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(\n                <StarFillIcon\n                    key={`star${i}`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (hasHalfStar) {\n            stars.push(\n                <StarHalfIcon\n                    key={`halfstar`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(\n                    <StarIcon\n                        key={`emptystar${i}`}\n                        aria-hidden\n                        className={styles.starIcon}\n                    />\n                );\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <div\n                className={styles.ratingContainer}\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n                data-testid={`${ID}-star-rating`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </div>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <div\n                    ref={mergeRefs(containerRef, ref)}\n                    data-testid={ID}\n                    className={clsx(\n                        styles.smartAppBannerContainer,\n                        isDark\n                            ? styles.smartAppBannerContainerDark\n                            : styles.smartAppBannerContainerLight,\n                        animated && styles.smartAppBannerContainerAnimated,\n                        className\n                    )}\n                >\n                    <div\n                        className={styles.proceedContainer}\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <img\n                            className={styles.bannerIcon}\n                            src={icon}\n                            alt={ariaLabels.icon}\n                        />\n                        <div className={styles.textContainer}>\n                            <Typography.BodySM className={styles.title}>\n                                {title}\n                            </Typography.BodySM>\n                            <Typography.BodyXS className={styles.description}>\n                                {message}\n                            </Typography.BodyXS>\n                            {generateStarRating()}\n                        </div>\n                        <div className={styles.buttonContainer}>\n                            <Button\n                                className={styles.button}\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                                sizeType=\"small\"\n                            >\n                                {buttonLabel}\n                            </Button>\n                        </div>\n                    </div>\n                    <div\n                        className={styles.dismissContainer}\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <ClickableIcon\n                            className={styles.dismissButton}\n                            aria-label={ariaLabels.dismiss}\n                        >\n                            <CrossIcon className={styles.cross} />\n                        </ClickableIcon>\n                    </div>\n                </div>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","containerRef","useRef","theme","useContext","ThemeContext","isDark","mode","useApplyStyle","styles.tokens","container","top","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","mergeRefs","clsx","styles.smartAppBannerContainer","styles.smartAppBannerContainerDark","styles.smartAppBannerContainerLight","styles.smartAppBannerContainerAnimated","styles.proceedContainer","id","styles.bannerIcon","src","alt","styles.textContainer","Typography","BodySM","styles.title","BodyXS","styles.description","isNaN","stars","hasHalfStar","Math","floor","i","push","StarFillIcon","styles.starIcon","StarHalfIcon","length","remaining","StarIcon","styles.ratingContainer","role","slice","generateStarRating","styles.buttonContainer","Button","styles.button","type","sizeType","styles.dismissContainer","ClickableIcon","styles.dismissButton","CrossIcon","styles.cross"],"mappings":"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"}

package/cjs/smart-app-banner/smart-app-banner.styles.js

@@ -1,94 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/cross"),r=require("@lifesg/react-icons/star"),t=require("@lifesg/react-icons/star-fill"),i=require("@lifesg/react-icons/star-half"),o=require("styled-components"),a=require("../button/button.js"),n=require("../shared/clickable-icon/clickable-icon.js"),s=require("../typography/index.js"),d=require("../v3_theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(o);const f=o.keyframes`
-	from {
-		opacity: 0;
-		transform: translateY(-20%);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-`,m=c.default.div`
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: stretch;
-    position: fixed;
-    margin: 0.5rem 1.25rem;
-    ${e=>`top: ${e.$offset}px;`}
-    left: 0;
-    width: calc(100% - 2.5rem);
-    min-height: 5.5rem;
-    z-index: 9001;
-    background: ${d.V3_Colour.bg};
-    ${e=>{var r;return"dark"===(null===(r=e.theme)||void 0===r?void 0:r.colourMode)?o.css`
-                  border: ${d.V3_Border["width-010"]} ${d.V3_Border.solid}
-                      ${d.V3_Colour.border};
-              `:o.css`
-                  box-shadow: ${d.V3_Shadow["md-subtle"]};
-              `}}
-    border-radius: ${d.V3_Radius.md};
-    ${e=>{if(e.$isAnimated)return o.css`
-                animation: ${f} 0.3s;
-            `}}
-`,u=c.default.div`
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 0.25rem 0.5rem 1rem;
-`,p=c.default(n.ClickableIcon)`
-    padding: 0;
-`,x=c.default(e.CrossIcon)`
-    color: ${d.V3_Colour.icon};
-    height: 1.25rem;
-    width: 1.25rem;
-`,g=c.default.div`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1rem 0.5rem 0.25rem;
-    cursor: pointer;
-`,h=c.default.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    margin: 0.5rem;
-    ${d.V3_MediaQuery.MaxWidth.xs} {
-        margin: 0 0.5rem;
-    }
-`,y=c.default.img`
-    width: 2.65rem;
-    height: auto;
-    align-self: center;
-`,$=c.default.div`
-    max-width: 30%;
-`,w=c.default(a.Button.Small)`
-    padding: 0.5rem;
-    height: auto;
-    & > span {
-        overflow-wrap: anywhere;
-        ${d.V3_Font["body-xs-semibold"]}
-    }
-`,b=c.default(s.Typography.BodySM)`
-    font-weight: ${d.V3_Font.Spec["weight-bold"]};
-    overflow-wrap: anywhere;
-    ${d.V3_MediaQuery.MaxWidth.xs} {
-        ${d.V3_Font["body-xs-bold"]}
-    }
-`,v=c.default(s.Typography.BodyXS)`
-    overflow-wrap: anywhere;
-`,S=c.default.div`
-    margin-top: 0.25rem;
-    display: flex;
-    align-items: center;
-`,_=o.css`
-    height: 2rem;
-    width: 2rem;
-    padding-right: 0.25rem;
-    color: #ffc107;
-`,C=c.default(t.StarFillIcon)`
-    ${_}
-`,V=c.default(i.StarHalfIcon)`
-    ${_}
-`,B=c.default(r.StarIcon)`
-    ${_}
-`;exports.BannerIcon=y,exports.ButtonContainer=$,exports.Cross=x,exports.Description=v,exports.DismissButton=p,exports.DismissContainer=u,exports.ProceedContainer=g,exports.RatingContainer=S,exports.SmartAppBannerContainer=m,exports.Star=C,exports.StarEmpty=B,exports.StarHalf=V,exports.StyledButton=w,exports.TextContainer=h,exports.Title=b;
+"use strict";require("./smart-app-banner.styles_m5dtgh.css");exports.bannerIcon="bece00m",exports.button="b1rqz1xr",exports.buttonContainer="b1ti1r81",exports.cross="cp9l7rn",exports.description="dp7x5g3",exports.dismissButton="d1cy2w47",exports.dismissContainer="dmwiwc",exports.proceedContainer="pdjtkx9",exports.ratingContainer="r1gggq6r",exports.smartAppBannerContainer="s4qb553",exports.smartAppBannerContainerAnimated="s9k7xr8",exports.smartAppBannerContainerDark="s1gji45a",exports.smartAppBannerContainerLight="s1yw94wd",exports.starIcon="sda01s1",exports.textContainer="t7s9qr2",exports.title="tmo9z7m",exports.tokens={container:{top:"--fds-internal-smartAppBanner-container-top"}};
 //# sourceMappingURL=smart-app-banner.styles.js.map

package/cjs/smart-app-banner/smart-app-banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.styles.js","sources":["../../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport styled, { css, keyframes } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\nconst slideDown = keyframes`\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20%);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n`;\n\nexport const SmartAppBannerContainer = styled.div<{\n    $offset: number;\n    $isAnimated: boolean;\n}>`\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${(props) => {\n        return `top: ${props.$offset}px;`;\n    }}\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${V3_Colour.bg};\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                      ${V3_Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${V3_Shadow[\"md-subtle\"]};\n              `;\n    }}\n    border-radius: ${V3_Radius[\"md\"]};\n    ${(props) => {\n        if (props.$isAnimated)\n            return css`\n                animation: ${slideDown} 0.3s;\n            `;\n    }}\n`;\n\nexport const DismissContainer = styled.div`\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const DismissButton = styled(ClickableIcon)`\n    padding: 0;\n`;\n\nexport const Cross = styled(CrossIcon)`\n    color: ${V3_Colour.icon};\n    height: 1.25rem;\n    width: 1.25rem;\n`;\n\nexport const ProceedContainer = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem 0.5rem 0.25rem;\n    cursor: pointer;\n`;\n\nexport const TextContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    margin: 0.5rem;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        margin: 0 0.5rem;\n    }\n`;\n\nexport const BannerIcon = styled.img`\n    width: 2.65rem;\n    height: auto;\n    align-self: center;\n`;\n\nexport const ButtonContainer = styled.div`\n    max-width: 30%;\n`;\n\nexport const StyledButton = styled(Button.Small)`\n    padding: 0.5rem;\n    height: auto;\n    & > span {\n        overflow-wrap: anywhere;\n        ${V3_Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const Title = styled(Typography.BodySM)`\n    font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n    overflow-wrap: anywhere;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        ${V3_Font[\"body-xs-bold\"]}\n    }\n`;\n\nexport const Description = styled(Typography.BodyXS)`\n    overflow-wrap: anywhere;\n`;\n\nexport const RatingContainer = styled.div`\n    margin-top: 0.25rem;\n    display: flex;\n    align-items: center;\n`;\n\nconst starIconStyle = css`\n    height: 2rem;\n    width: 2rem;\n    padding-right: 0.25rem;\n    color: #ffc107;\n`;\n\nexport const Star = styled(StarFillIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarHalf = styled(StarHalfIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarEmpty = styled(StarIcon)`\n    ${starIconStyle}\n`;\n"],"names":["slideDown","keyframes","SmartAppBannerContainer","styled","div","props","$offset","V3_Colour","bg","theme","_a","colourMode","css","V3_Border","V3_Shadow","V3_Radius","$isAnimated","DismissContainer","DismissButton","ClickableIcon","Cross","CrossIcon","icon","ProceedContainer","TextContainer","V3_MediaQuery","MaxWidth","xs","BannerIcon","img","ButtonContainer","StyledButton","Button","Small","V3_Font","Title","Typography","BodySM","Spec","Description","BodyXS","RatingContainer","starIconStyle","Star","StarFillIcon","StarHalf","StarHalfIcon","StarEmpty","StarIcon"],"mappings":"qcAkBA,MAAMA,EAAYC,EAAAA,SAAS;;;;;;;;;EAWdC,EAA0BC,EAAAA,QAAOC,GAG5C;;;;;;MAMKC,GACQ,QAAQA,EAAMC;;;;;kBAMXC,EAAAA,UAAUC;MACrBH,UACC,MAAmC,UAAjB,UAAXA,EAAMI,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,KAAG;4BACWC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;wBAC/CN,EAAAA,UAAkB;gBAE5BK,KAAG;gCACeE,EAAAA,UAAU;eAC3B;qBAEMC,EAAAA,UAAc;MAC5BV,IACC,GAAIA,EAAMW,YACN,OAAOJ,KAAG;6BACOZ;aAChB;EAIAiB,EAAmBd,EAAAA,QAAOC,GAAG;;;;EAM7Bc,EAAgBf,EAAAA,QAAOgB,EAAAA,cAAc;;EAIrCC,EAAQjB,EAAAA,QAAOkB,EAAAA,UAAU;aACzBd,EAAAA,UAAUe;;;EAKVC,EAAmBpB,EAAAA,QAAOC,GAAG;;;;;;EAQ7BoB,EAAgBrB,EAAAA,QAAOC,GAAG;;;;;;MAMjCqB,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAazB,EAAAA,QAAO0B,GAAG;;;;EAMvBC,EAAkB3B,EAAAA,QAAOC,GAAG;;EAI5B2B,EAAe5B,EAAAA,QAAO6B,SAAOC,MAAM;;;;;UAKtCC,EAAAA,QAAQ;;EAILC,EAAQhC,EAAAA,QAAOiC,aAAWC,OAAO;mBAC3BH,EAAAA,QAAQI,KAAK;;MAE1Bb,EAAAA,cAAcC,SAASC;UACnBO,EAAAA,QAAQ;;EAILK,EAAcpC,EAAAA,QAAOiC,aAAWI,OAAO;;EAIvCC,EAAkBtC,EAAAA,QAAOC,GAAG;;;;EAMnCsC,EAAgB9B,EAAAA,GAAG;;;;;EAOZ+B,EAAOxC,EAAAA,QAAOyC,EAAAA,aAAa;MAClCF;EAGOG,EAAW1C,EAAAA,QAAO2C,EAAAA,aAAa;MACtCJ;EAGOK,EAAY5C,EAAAA,QAAO6C,EAAAA,SAAS;MACnCN;"}
+{"version":3,"file":"smart-app-banner.styles.js","sources":["../../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Shadow } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        top: \"--fds-internal-smartAppBanner-container-top\",\n    },\n};\n\nexport const smartAppBannerContainer = css`\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${tokens.container.top}: initial;\n    top: var(${tokens.container.top});\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${Colour.bg};\n    border-radius: ${Radius.md};\n`;\n\nexport const smartAppBannerContainerLight = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const smartAppBannerContainerDark = css`\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const smartAppBannerContainerAnimated = css`\n    @keyframes smart-app-banner-slide-down {\n        from {\n            opacity: 0;\n            transform: translateY(-20%);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n    animation: smart-app-banner-slide-down 0.3s;\n`;\n\nexport const dismissContainer = css`\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const dismissButton = css`\n    padding: 0;\n`;\n\nexport const cross = css`\n    color: ${Colour.icon};\n    height: 1.25rem;\n    width: 1.25rem;\n`;\n\nexport const proceedContainer = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem 0.5rem 0.25rem;\n    cursor: pointer;\n`;\n\nexport const textContainer = css`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    margin: 0.5rem;\n    ${MediaQuery.MaxWidth.xs} {\n        margin: 0 0.5rem;\n    }\n`;\n\nexport const bannerIcon = css`\n    width: 2.65rem;\n    height: auto;\n    align-self: center;\n`;\n\nexport const buttonContainer = css`\n    max-width: 30%;\n`;\n\nexport const button = css`\n    padding: 0.5rem;\n    height: auto;\n    & > span {\n        overflow-wrap: anywhere;\n        ${Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const title = css`\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    overflow-wrap: anywhere;\n    ${MediaQuery.MaxWidth.xs} {\n        ${Font[\"body-xs-bold\"]}\n    }\n`;\n\nexport const description = css`\n    overflow-wrap: anywhere;\n`;\n\nexport const ratingContainer = css`\n    margin-top: 0.25rem;\n    display: flex;\n    align-items: center;\n`;\n\nexport const starIcon = css`\n    height: 2rem;\n    width: 2rem;\n    padding-right: 0.25rem;\n    color: #ffc107;\n`;\n"],"names":["container","top"],"mappings":"gHAmFuB,yBAUJ,mCAJS,yBA/BV,8BAoDM,gCAxDE,oCANG,kCAgBA,kCAkDD,2CAxGQ,kDAwBQ,8CAJJ,gDAJC,4BA8FpB,gCAhDK,wBA8BR,yBAlGI,CAClBA,UAAW,CACPC,IAAK"}

package/cjs/smart-app-banner/smart-app-banner.styles_m5dtgh.css

@@ -0,0 +1,16 @@
+.s4qb553{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;position:fixed;margin:0.5rem 1.25rem;--fds-internal-smartAppBanner-container-top:initial;top:var(--fds-internal-smartAppBanner-container-top);left:0;width:calc(100% - 2.5rem);min-height:5.5rem;z-index:9001;background:var(--fds-colour-bg);border-radius:var(--fds-radius-md);}
+.s1yw94wd{box-shadow:var(--fds-shadow-md-subtle);}
+.s1gji45a{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.s9k7xr8{-webkit-animation:smart-app-banner-slide-down-s9k7xr8 0.3s;animation:smart-app-banner-slide-down-s9k7xr8 0.3s;}@-webkit-keyframes smart-app-banner-slide-down-s9k7xr8{from{opacity:0;-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes smart-app-banner-slide-down-s9k7xr8{from{opacity:0;-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}
+.dmwiwc{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;padding:0.5rem 0.25rem 0.5rem 1rem;}
+.d1cy2w47{padding:0;}
+.cp9l7rn{color:var(--fds-colour-icon);height:1.25rem;width:1.25rem;}
+.pdjtkx9{-webkit-flex:1;-ms-flex:1;flex:1;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;padding:0.5rem 1rem 0.5rem 0.25rem;cursor:pointer;}
+.t7s9qr2{-webkit-flex:1;-ms-flex:1;flex:1;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:left;-webkit-box-align:left;-ms-flex-align:left;align-items:left;margin:0.5rem;}:where(body.fds-breakpoint-xs-max) .t7s9qr2{margin:0 0.5rem;}
+.bece00m{width:2.65rem;height:auto;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.b1ti1r81{max-width:30%;}
+.b1rqz1xr{padding:0.5rem;height:auto;}.b1rqz1xr>span{overflow-wrap:anywhere;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.tmo9z7m{font-weight:var(--fds-font-weight-bold);overflow-wrap:anywhere;}:where(body.fds-breakpoint-xs-max) .tmo9z7m{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.dp7x5g3{overflow-wrap:anywhere;}
+.r1gggq6r{margin-top:0.25rem;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;}
+.sda01s1{height:2rem;width:2rem;padding-right:0.25rem;color:#ffc107;}

package/cjs/tab/tab-link-chain.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),r=require("react"),n=require("../shared/fade-wrapper/fade-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var i=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/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 a=require("../theme/utils/use-design-token.js"),s=require("./tab-context.js"),o=require("./tab-link-chain.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(t);exports.TabLinkChain=({controlledMode:t,"data-testid":u,onTabClick:c,fullWidthIndicatorLine:h,fadeColor:f})=>{const{setCurrentActiveIndex:m,currentActiveIndex:v,tabLinks:p}=r.useContext(s.TabContext),j=a.useDesignToken(i.Breakpoint["lg-max"]),k=l.useSafeMaxWidthMediaQuery(j),q=r.useRef(null),x=r.useRef(null),b=r.useRef([]),y=r.useRef([]);r.useEffect((()=>{y.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=p[t])||void 0===r?void 0:r.width;n?e.style.setProperty(o.tokens.chainItem.width,n):e.style.removeProperty(o.tokens.chainItem.width)}))}),[p]);const g=e=>r=>{r.preventDefault(),r.stopPropagation(),t||m(e),c&&c(p[e].title,e)};return e.jsx(n.FadeWrapper,{onResize:({content:e})=>{e&&k&&q.current&&x.current&&(e.scrollLeft=q.current.getBoundingClientRect().left-x.current.getBoundingClientRect().left)},"data-testid":u,fadeColor:f,className:o.customFadeWrapper,children:e.jsx("ul",{role:"tablist",ref:x,className:d.default(o.chain,h&&o.chainFullWidthIndicator),children:p.map((({title:t,width:r,titleAddon:n},i)=>{var l;const a=v===i;return e.jsx("li",{role:"none",className:d.default(o.chainItem,a&&o.chainItemActive),ref:e=>{y.current[i]=e,a&&(q.current=e)},children:e.jsxs("div",{role:"none",onClick:g(i),"data-testid":`${u}-link-${i}`,className:d.default(o.flexRow,o.chainLink,"left"===(null==n?void 0:n.position)&&o.chainLinkReversed),children:[e.jsxs("div",{className:o.labelContainer,role:"none",children:[e.jsx("div",{className:d.default(o.label,o.deselectedLabel,a&&o.deselectedLabelActive),onClick:g(i),"aria-hidden":"true",children:t}),e.jsx("button",{role:"tab",type:"button","aria-selected":a,tabIndex:a?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%p.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+p.length)%p.length,e.preventDefault()),null===(r=b.current[n])||void 0===r||r.focus()})(e,i),ref:e=>b.current[i]=e,className:d.default(o.label,o.selectedLabel,a&&o.selectedLabelActive),children:t})]}),null==n?void 0:n.content]})},`${t}-${null!=r?r:""}-${null!==(l=null==n?void 0:n.position)&&void 0!==l?l:"none"}`)}))})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),r=require("react"),n=require("../shared/fade-wrapper/fade-wrapper.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 i=require("../theme/utils/use-media-query.js"),l=require("./tab-context.js"),a=require("./tab-link-chain.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(t);exports.TabLinkChain=({controlledMode:t,"data-testid":s,onTabClick:u,fullWidthIndicatorLine:d,fadeColor:c})=>{const{setCurrentActiveIndex:h,currentActiveIndex:f,tabLinks:v}=r.useContext(l.TabContext),m=i.useMaxWidthMediaQuery("lg"),p=r.useRef(null),j=r.useRef(null),x=r.useRef([]),b=r.useRef([]);r.useEffect((()=>{b.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=v[t])||void 0===r?void 0:r.width;n?e.style.setProperty(a.tokens.chainItem.width,n):e.style.removeProperty(a.tokens.chainItem.width)}))}),[v]);const q=e=>r=>{r.preventDefault(),r.stopPropagation(),t||h(e),u&&u(v[e].title,e)};return e.jsx(n.FadeWrapper,{onResize:({content:e})=>{e&&m&&p.current&&j.current&&(e.scrollLeft=p.current.getBoundingClientRect().left-j.current.getBoundingClientRect().left)},"data-testid":s,fadeColor:c,className:a.customFadeWrapper,children:e.jsx("ul",{role:"tablist",ref:j,className:o.default(a.chain,d&&a.chainFullWidthIndicator),children:v.map((({title:t,width:r,titleAddon:n},i)=>{var l;const u=f===i;return e.jsx("li",{role:"none",className:o.default(a.chainItem,u&&a.chainItemActive),ref:e=>{b.current[i]=e,u&&(p.current=e)},children:e.jsxs("div",{role:"none",onClick:q(i),"data-testid":`${s}-link-${i}`,className:o.default(a.flexRow,a.chainLink,"left"===(null==n?void 0:n.position)&&a.chainLinkReversed),children:[e.jsxs("div",{className:a.labelContainer,role:"none",children:[e.jsx("div",{className:o.default(a.label,a.deselectedLabel,u&&a.deselectedLabelActive),onClick:q(i),"aria-hidden":"true",children:t}),e.jsx("button",{role:"tab",type:"button","aria-selected":u,tabIndex:u?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%v.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+v.length)%v.length,e.preventDefault()),null===(r=x.current[n])||void 0===r||r.focus()})(e,i),ref:e=>x.current[i]=e,className:o.default(a.label,a.selectedLabel,u&&a.selectedLabelActive),children:t})]}),null==n?void 0:n.content]})},`${t}-${null!=r?r:""}-${null!==(l=null==n?void 0:n.position)&&void 0!==l?l:"none"}`)}))})})};
 //# sourceMappingURL=tab-link-chain.js.map

package/cjs/tab/tab-link-chain.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.js","sources":["../../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useDesignToken, useSafeMaxWidthMediaQuery } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const tabletBreakpoint = useDesignToken(Breakpoint[\"lg-max\"]);\n    const isTablet = useSafeMaxWidthMediaQuery(tabletBreakpoint);\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","tabletBreakpoint","useDesignToken","Breakpoint","isTablet","useSafeMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"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"}
+{"version":3,"file":"tab-link-chain.js","sources":["../../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","isTablet","useMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"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"}

package/cjs/text-list/ordered-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=require("react");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 i=require("../theme/utils/use-apply-styles.js"),o=require("./text-list.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(t);const a=t=>{var{className:l,size:a,counterType:n,counterSeparator:d,reversed:c,start:m,bottomMargin:p,children:j}=t,q=e.__rest(t,["className","size","counterType","counterSeparator","reversed","start","bottomMargin","children"]);const h=s.useRef(null),v=Boolean(m);var y;return i.useApplyStyle(h,{[o.tokens.listBottomMargin]:`${null!=p?p:0}rem`,[o.tokens.orderedListCounterStyle]:null!=n?n:null,[o.tokens.orderedListCounterSeparator]:(y=null!=d?d:")",`"${y.replace(/"/g,'\\"')}"`),[o.tokens.orderedListStartValue]:v?c?m+1:m-1:null}),r.jsx("ol",Object.assign({ref:h,reversed:c,start:m,className:u.default(o.listBase,o.orderedList,a&&o.listSize[a],c&&o.orderedListReversed,v&&o.orderedListCustomStart,l)},q,{children:j}))};a.displayName="TextList.Ol",exports.OrderedList=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=require("react");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 i=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var o=require("./text-list.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(t);const a=t=>{var{className:u,size:a,counterType:n,counterSeparator:d,reversed:c,start:m,bottomMargin:p,children:q}=t,j=e.__rest(t,["className","size","counterType","counterSeparator","reversed","start","bottomMargin","children"]);const h=s.useRef(null),v=Boolean(m);var y;return i.useApplyStyle(h,{[o.tokens.listBottomMargin]:`${null!=p?p:0}rem`,[o.tokens.orderedListCounterStyle]:null!=n?n:null,[o.tokens.orderedListCounterSeparator]:(y=null!=d?d:")",`"${y.replace(/"/g,'\\"')}"`),[o.tokens.orderedListStartValue]:v?c?m+1:m-1:null}),r.jsx("ol",Object.assign({ref:h,reversed:c,start:m,className:l.default(o.listBase,o.orderedList,a&&o.listSize[a],c&&o.orderedListReversed,v&&o.orderedListCustomStart,u)},j,{children:q}))};a.displayName="TextList.Ol",exports.OrderedList=a;
 //# sourceMappingURL=ordered-list.js.map

package/cjs/text-list/ordered-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ordered-list.js","sources":["../../../src/text-list/ordered-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./text-list.styles\";\nimport type { OrderedListProps } from \"./types\";\n\nconst escapeDoubleQuotes = (value: string) => `\"${value.replace(/\"/g, '\\\\\"')}\"`;\n\nexport const OrderedList = ({\n    className,\n    size,\n    counterType,\n    counterSeparator,\n    reversed,\n    start,\n    bottomMargin,\n    children,\n    ...otherProps\n}: OrderedListProps) => {\n    const listRef = useRef<HTMLOListElement>(null);\n    const hasCustomStart = Boolean(start);\n\n    useApplyStyle(listRef, {\n        [styles.tokens.listBottomMargin]: `${bottomMargin ?? 0}rem`,\n        [styles.tokens.orderedListCounterStyle]: counterType ?? null,\n        [styles.tokens.orderedListCounterSeparator]: escapeDoubleQuotes(\n            counterSeparator ?? \")\"\n        ),\n        [styles.tokens.orderedListStartValue]: hasCustomStart\n            ? reversed\n                ? (start as number) + 1\n                : (start as number) - 1\n            : null,\n    });\n\n    return (\n        <ol\n            ref={listRef}\n            reversed={reversed}\n            start={start}\n            className={clsx(\n                styles.listBase,\n                styles.orderedList,\n                size && styles.listSize[size],\n                reversed && styles.orderedListReversed,\n                hasCustomStart && styles.orderedListCustomStart,\n                className\n            )}\n            {...otherProps}\n        >\n            {children}\n        </ol>\n    );\n};\n\nOrderedList.displayName = \"TextList.Ol\";\n"],"names":["OrderedList","_a","className","size","counterType","counterSeparator","reversed","start","bottomMargin","children","otherProps","__rest","listRef","useRef","hasCustomStart","Boolean","value","useApplyStyle","styles.tokens","listBottomMargin","orderedListCounterStyle","orderedListCounterSeparator","replace","orderedListStartValue","_jsx","Object","assign","ref","clsx","styles.listBase","styles.orderedList","styles.listSize","styles.orderedListReversed","styles.orderedListCustomStart","displayName"],"mappings":"mhBAOA,MAEaA,EAAeC,QAAAC,UACxBA,EAASC,KACTA,EAAIC,YACJA,EAAWC,iBACXA,EAAgBC,SAChBA,EAAQC,MACRA,EAAKC,aACLA,EAAYC,SACZA,GAAQR,EACLS,EAAUC,EAAAA,OAAAV,EATW,oGAWxB,MAAMW,EAAUC,EAAAA,OAAyB,MACnCC,EAAiBC,QAAQR,GAdR,IAACS,EA6BxB,OAbAC,EAAAA,cAAcL,EAAS,CACnB,CAACM,SAAcC,kBAAmB,GAAGX,QAAAA,EAAgB,OACrD,CAACU,EAAAA,OAAcE,yBAA0BhB,QAAAA,EAAe,KACxD,CAACc,EAAAA,OAAcG,8BAnBKL,EAoBhBX,QAAAA,EAAoB,IApBc,IAAIW,EAAMM,QAAQ,KAAM,WAsB9D,CAACJ,EAAAA,OAAcK,uBAAwBT,EACjCR,EACKC,EAAmB,EACnBA,EAAmB,EACxB,OAINiB,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACIC,IAAKf,EACLN,SAAUA,EACVC,MAAOA,EACPL,UAAW0B,EAAAA,QACPC,EAAAA,SACAC,cACA3B,GAAQ4B,EAAAA,SAAgB5B,GACxBG,GAAY0B,EAAAA,oBACZlB,GAAkBmB,EAAAA,uBAClB/B,IAEAQ,EAAU,CAAAD,SAEbA,IACA,EAIbT,EAAYkC,YAAc"}
+{"version":3,"file":"ordered-list.js","sources":["../../../src/text-list/ordered-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./text-list.styles\";\nimport type { OrderedListProps } from \"./types\";\n\nconst escapeDoubleQuotes = (value: string) => `\"${value.replace(/\"/g, '\\\\\"')}\"`;\n\nexport const OrderedList = ({\n    className,\n    size,\n    counterType,\n    counterSeparator,\n    reversed,\n    start,\n    bottomMargin,\n    children,\n    ...otherProps\n}: OrderedListProps) => {\n    const listRef = useRef<HTMLOListElement>(null);\n    const hasCustomStart = Boolean(start);\n\n    useApplyStyle(listRef, {\n        [styles.tokens.listBottomMargin]: `${bottomMargin ?? 0}rem`,\n        [styles.tokens.orderedListCounterStyle]: counterType ?? null,\n        [styles.tokens.orderedListCounterSeparator]: escapeDoubleQuotes(\n            counterSeparator ?? \")\"\n        ),\n        [styles.tokens.orderedListStartValue]: hasCustomStart\n            ? reversed\n                ? (start as number) + 1\n                : (start as number) - 1\n            : null,\n    });\n\n    return (\n        <ol\n            ref={listRef}\n            reversed={reversed}\n            start={start}\n            className={clsx(\n                styles.listBase,\n                styles.orderedList,\n                size && styles.listSize[size],\n                reversed && styles.orderedListReversed,\n                hasCustomStart && styles.orderedListCustomStart,\n                className\n            )}\n            {...otherProps}\n        >\n            {children}\n        </ol>\n    );\n};\n\nOrderedList.displayName = \"TextList.Ol\";\n"],"names":["OrderedList","_a","className","size","counterType","counterSeparator","reversed","start","bottomMargin","children","otherProps","__rest","listRef","useRef","hasCustomStart","Boolean","value","useApplyStyle","styles.tokens","listBottomMargin","orderedListCounterStyle","orderedListCounterSeparator","replace","orderedListStartValue","_jsx","Object","assign","ref","clsx","styles.listBase","styles.orderedList","styles.listSize","styles.orderedListReversed","styles.orderedListCustomStart","displayName"],"mappings":"okBAOA,MAEaA,EAAeC,QAAAC,UACxBA,EAASC,KACTA,EAAIC,YACJA,EAAWC,iBACXA,EAAgBC,SAChBA,EAAQC,MACRA,EAAKC,aACLA,EAAYC,SACZA,GAAQR,EACLS,EAAUC,EAAAA,OAAAV,EATW,oGAWxB,MAAMW,EAAUC,EAAAA,OAAyB,MACnCC,EAAiBC,QAAQR,GAdR,IAACS,EA6BxB,OAbAC,EAAAA,cAAcL,EAAS,CACnB,CAACM,SAAcC,kBAAmB,GAAGX,QAAAA,EAAgB,OACrD,CAACU,EAAAA,OAAcE,yBAA0BhB,QAAAA,EAAe,KACxD,CAACc,EAAAA,OAAcG,8BAnBKL,EAoBhBX,QAAAA,EAAoB,IApBc,IAAIW,EAAMM,QAAQ,KAAM,WAsB9D,CAACJ,EAAAA,OAAcK,uBAAwBT,EACjCR,EACKC,EAAmB,EACnBA,EAAmB,EACxB,OAINiB,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACIC,IAAKf,EACLN,SAAUA,EACVC,MAAOA,EACPL,UAAW0B,EAAAA,QACPC,EAAAA,SACAC,cACA3B,GAAQ4B,EAAAA,SAAgB5B,GACxBG,GAAY0B,EAAAA,oBACZlB,GAAkBmB,EAAAA,uBAClB/B,IAEAQ,EAAU,CAAAD,SAEbA,IACA,EAIbT,EAAYkC,YAAc"}