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

package/codemods/run-codemod.ts

@@ -3,8 +3,6 @@ import { execSync } from "child_process";
 import * as fs from "fs";
 import * as path from "path";
 
-import { Theme } from "./common";
-
 const codemodsDir =
     process.env.ENV === "dev"
         ? path.join(process.cwd(), "codemods")
@@ -14,12 +12,7 @@ const codemodsDir =
           );
 
 enum Codemod {
-    DeprecateV2Tokens = "deprecate-v2-tokens",
-    MigrateColour = "migrate-colour",
-    MigrateLayout = "migrate-layout",
-    MigrateMediaQuery = "migrate-media-query",
-    MigrateText = "migrate-text",
-    MigrateTextList = "migrate-text-list",
+    MigratePopover = "migrate-popover",
 }
 
 const theme = {
@@ -27,15 +20,8 @@ const theme = {
 };
 
 const CodemodDescriptions: { [key in Codemod]: string } = {
-    [Codemod.DeprecateV2Tokens]: "Migrate deprecated V2 imports",
-    [Codemod.MigrateColour]: "Replace V2_Color with new Colour tokens",
-    [Codemod.MigrateLayout]: "Replace V2_Layout with new Layout components",
-    [Codemod.MigrateMediaQuery]:
-        "Replace V2 media queries with new Breakpoint tokens",
-    [Codemod.MigrateText]:
-        "Replace V2_Text with new Typography components and V2_TextStyleHelper.getTextStyle() with Font",
-    [Codemod.MigrateTextList]:
-        "Replace V2_TextList with new Textlist components",
+    [Codemod.MigratePopover]:
+        "Replace deprecated Popover and migrate PopoverV2 imports",
 };
 
 const TargetDirectoryPaths = {
@@ -45,7 +31,6 @@ const TargetDirectoryPaths = {
 
 interface UserSelection {
     selectedCodemods: string[];
-    selectedTheme: Theme | null;
     targetPath: string;
 }
 
@@ -65,16 +50,12 @@ function listCodemods(): { name: string; value: string }[] {
 }
 
 function runCodemods(selection: UserSelection): void {
-    const { selectedCodemods, targetPath, selectedTheme } = selection;
+    const { selectedCodemods, targetPath } = selection;
 
     selectedCodemods.forEach((codemod) => {
         const codemodPath = path.join(codemodsDir, codemod, "index.ts");
         let command = `npx --yes jscodeshift --parser=tsx -t ${codemodPath} ${targetPath}`;
 
-        if (codemod === Codemod.MigrateColour && selectedTheme) {
-            command = `npx --yes jscodeshift --parser=tsx -t ${codemodPath} --mapping=${selectedTheme} ${targetPath}`;
-        }
-
         console.log(
             `Running codemod: ${codemod} on target path: ${targetPath}`
         );
@@ -133,24 +114,6 @@ async function chooseTargetPath(): Promise<string | null> {
     return selectedOption;
 }
 
-async function chooseTheme(): Promise<Theme | null> {
-    const themeOptions = [
-        { name: "LifeSG", value: Theme.LifeSG },
-        { name: "BookingSG", value: Theme.BookingSG },
-        { name: "MyLegacy", value: Theme.MyLegacy },
-        { name: "CCube", value: Theme.CCube },
-        { name: "RBS", value: Theme.RBS },
-        { name: "OneService", value: Theme.OneService },
-    ];
-
-    const selectedTheme = await select({
-        message: "Select the theme that your project is using:",
-        choices: themeOptions,
-    });
-
-    return selectedTheme;
-}
-
 async function getCodemodSelections(): Promise<UserSelection> {
     const codemods = listCodemods();
     if (codemods.length === 0) {
@@ -164,31 +127,21 @@ async function getCodemodSelections(): Promise<UserSelection> {
         theme,
     });
 
-    let selectedTheme: Theme | null = null;
-    if (selectedCodemods.includes(Codemod.MigrateColour)) {
-        selectedTheme = await chooseTheme();
-    }
-
     const targetPath = await chooseTargetPath();
     if (!targetPath) {
         throw new Error("No target path selected or provided");
     }
 
-    return { selectedCodemods, selectedTheme, targetPath };
+    return { selectedCodemods, targetPath };
 }
 
 async function getConfirmation(selection: UserSelection) {
-    const { selectedCodemods, selectedTheme, targetPath } = selection;
+    const { selectedCodemods, targetPath } = selection;
 
     const codemods = selectedCodemods.join(", ");
     const finalConfirmationMessage =
         `\nYou are about to run the following codemods: ${codemods}\n` +
-        `Target path: ${targetPath}\n` +
-        `${
-            selectedTheme
-                ? `Selected theme for "migrate-colour": ${selectedTheme}\n`
-                : ""
-        }`;
+        `Target path: ${targetPath}\n`;
 
     console.log(finalConfirmationMessage);
 

package/countdown-timer/countdown-timer.d.ts

@@ -1,2 +1,9 @@
 import type { CountdownTimerProps } from "./types";
+/**
+ * Displays a live countdown of time remaining until a deadline.
+ *
+ * Use when a time-limited interaction — such as a session timeout or a timed
+ * form — needs a persistent visual reminder.
+ * @keywords deadline, expiry, session, timeout, timer
+ */
 export declare const CountdownTimer: ({ className, align, timer, timestamp, notifyTimer, offset, mobileOffset, show, fixed, reminderInterval, "data-testid": testId, onFinish, onNotify, onTick, ...otherProps }: CountdownTimerProps) => import("react/jsx-runtime").JSX.Element;

package/countdown-timer/countdown-timer.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,Fragment as r,jsxs as i}from"react/jsx-runtime";import n from"../external/lodash/throttle.js";import{useRef as o,useState as s,useContext as a,useEffect as l}from"react";import{useInView as m}from"../external/react-intersection-observer/index.js";import{r as d}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as c}from"styled-components";import{inertValue as u,VisuallyHidden as f}from"../shared/accessibility/index.js";import{TimeHelper as p}from"../util/time-helper.js";import{V3_Breakpoint as v}from"../v3_theme/index.js";import{Wrapper as h,Countdown as x,FixedCountdown as b,TimerIcon as w,TimeLeft as $,Timer as y}from"./countdown-timer.style.js";import{useTimer as g}from"./use-timer.js";const j=j=>{var{className:T,align:I="right",timer:M,timestamp:N,notifyTimer:F,offset:S,mobileOffset:C,show:O,fixed:_=!0,reminderInterval:k=120,"data-testid":z,onFinish:E,onNotify:L,onTick:V}=j,W=e(j,["className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","data-testid","onFinish","onNotify","onTick"]);const B=o(null),Q=o(!1),[R,q]=s(0),[A,D]=s(0),[G,H]=s(0),[J,K]=s(!1),[P,U]=s(""),[X,Y]=g(M,N,J),{ref:Z,inView:ee}=m({threshold:1,rootMargin:-1*R+"px 0px 0px 0px",initialInView:!0}),te=!_||ee,re="number"==typeof F&&X<=F,ie=a(c),ne=v["sm-max"]({theme:ie}),oe=d.useMediaQuery({maxWidth:ne});l((()=>{K(O)}),[O]),l((()=>{0===X?de():"number"==typeof F&&X<=F&&(le(),me())}),[X]),l((()=>{const e=function(){var e,t;const r=null!==(e=null==S?void 0:S.top)&&void 0!==e?e:168,i=null!==(t=null==C?void 0:C.top)&&void 0!==t?t:80,n=oe?i:r;return n}();q(e)}),[oe,null==S?void 0:S.top,null==C?void 0:C.top]),l((()=>{if(B.current){const e=n(se,300);return se(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}}),[B.current]),l((()=>{const e=Y-X;0!==e&&(e%k==0&&("number"!=typeof F||X>F)&&U(ce(X)),"number"==typeof F&&X===F&&U(ce(X)))}),[X,Y,k,F]),l((()=>{Q.current=!1}),[Y,O]);const se=()=>{if(!B.current)return;const e=B.current.getBoundingClientRect();H(e.x),D(e.right)},ae=()=>{const e=ce(X);U(e)},le=()=>{V&&V(X)},me=()=>{L&&!Q.current&&(Q.current=!0,L())},de=()=>{K(!1),E&&E()};const ce=e=>{const{minutes:t,seconds:r}=p.toMinutesSeconds(e),i=1===t?"minute":"minutes",n=1===r?"second":"seconds";return t>0&&r>0?`Time left: ${t} ${i} and ${r} ${n}`:t>0?`Time left: ${t} ${i}`:`Time left: ${r} ${n}`},ue=()=>{const{minutes:e,seconds:n}=p.toMinutesSeconds(X),o=1!==e?"mins":"min",s=1!==n?"secs":"sec";return i(r,{children:[t(w,{$warn:re}),t($,{children:"Time left:"}),i(y,{"aria-label":ce(X),children:[e," ",o," ",String(n).padStart(2,"0")," ",s]}),t(f,{"aria-live":"number"==typeof F&&X<=F?"assertive":"polite","aria-atomic":"true",children:P})]})};return J||0===X?i(h,Object.assign({className:T},W,{children:[t("div",{ref:Z}),t(x,{"data-testid":z,"data-id":"countdown-wrapper",ref:B,inert:u(!te),$visible:te,$warn:re,tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:ae,children:ue()}),B.current&&!te&&(()=>{var e,r;const i=null!==(e=null==S?void 0:S.left)&&void 0!==e?e:"left"===I?G:void 0,n=null!==(r=null==S?void 0:S.right)&&void 0!==r?r:"right"===I?Math.floor(document.body.clientWidth-A):void 0;return t(b,{"data-testid":z,"data-id":"fixed-countdown-wrapper",$warn:re,$top:R,$left:i,$right:n,tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:ae,children:ue()})})()]})):t(r,{})};export{j as CountdownTimer};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,Fragment as r,jsxs as i}from"react/jsx-runtime";import{ClockIcon as o}from"@lifesg/react-icons";import n from"clsx";import s from"../external/lodash/throttle.js";import{useRef as m,useState as a,useEffect as l}from"react";import{useInView as d}from"../external/react-intersection-observer/index.js";import{inertValue as u,VisuallyHidden as c}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import{formatUnitValue as p}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as f}from"../theme/utils/use-apply-styles.js";import{useMaxWidthMediaQuery as h}from"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as v}from"../util/use-mount.js";import{TimeHelper as x}from"../util/time-helper.js";import{tokens as j,wrapper as w,countdown as b,countdownInline as y,countdownHidden as g,countdownFixed as N,timerIcon as T,timeLeft as $,timer as k}from"./countdown-timer.styles.js";import{useTimer as C}from"./use-timer.js";const I=I=>{var{className:F,align:M="right",timer:S,timestamp:O,notifyTimer:q,offset:z,mobileOffset:E,show:L,fixed:V=!0,reminderInterval:_=120,"data-testid":B,onFinish:R,onNotify:W,onTick:A}=I,D=e(I,["className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","data-testid","onFinish","onNotify","onTick"]);const G=m(null),H=m(null),J=m(!1),[K,P]=a(0),[Q,U]=a(0),[X,Y]=a(0),[Z,ee]=a(!1),[te,re]=a(""),ie=v(),[oe,ne]=C(S,O,Z),{ref:se,inView:me}=d({threshold:1,rootMargin:-1*K+"px 0px 0px 0px",initialInView:!0}),ae=!V||me,le="number"==typeof q&&oe<=q,de=h("sm");f(H,{[j.fixedCountdown.top]:p(K,"px"),[j.fixedCountdown.left]:p(function(){var e;return ie&&"left"===M?null!==(e=null==z?void 0:z.left)&&void 0!==e?e:X:void 0}(),"px"),[j.fixedCountdown.right]:p(function(){var e;return ie&&"right"===M?null!==(e=null==z?void 0:z.right)&&void 0!==e?e:Math.floor(document.body.clientWidth-Q):void 0}(),"px")}),l((()=>{ee(L)}),[L]),l((()=>{0===oe?he():"number"==typeof q&&oe<=q&&(pe(),fe())}),[oe]),l((()=>{const e=function(){var e,t;const r=null!==(e=null==z?void 0:z.top)&&void 0!==e?e:168,i=null!==(t=null==E?void 0:E.top)&&void 0!==t?t:80,o=de?i:r;return o}();P(e)}),[de,null==z?void 0:z.top,null==E?void 0:E.top]),l((()=>{if(G.current){const e=s(ue,300);return ue(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}}),[G.current]),l((()=>{const e=ne-oe;0!==e&&(e%_==0&&("number"!=typeof q||oe>q)&&re(ve(oe)),"number"==typeof q&&oe===q&&re(ve(oe)))}),[oe,ne,_,q]),l((()=>{J.current=!1}),[ne,L]);const ue=()=>{if(!G.current)return;const e=G.current.getBoundingClientRect();Y(e.x),U(e.right)},ce=()=>{const e=ve(oe);re(e)},pe=()=>{A&&A(oe)},fe=()=>{W&&!J.current&&(J.current=!0,W())},he=()=>{ee(!1),R&&R()};const ve=e=>{const{minutes:t,seconds:r}=x.toMinutesSeconds(e),i=1===t?"minute":"minutes",o=1===r?"second":"seconds";return t>0&&r>0?`Time left: ${t} ${i} and ${r} ${o}`:t>0?`Time left: ${t} ${i}`:`Time left: ${r} ${o}`},xe=()=>{const{minutes:e,seconds:n}=x.toMinutesSeconds(oe),s=1!==e?"mins":"min",m=1!==n?"secs":"sec";return i(r,{children:[t(o,{className:T,"data-warn":!!le}),t("div",{className:$,children:"Time left:"}),i("div",{className:k,"aria-label":ve(oe),children:[e," ",s," ",String(n).padStart(2,"0")," ",m]}),t(c,{"aria-live":"number"==typeof q&&oe<=q?"assertive":"polite","aria-atomic":"true",children:te})]})};return Z||0===oe?i("div",Object.assign({className:n(w,F)},D,{children:[t("div",{ref:se}),t("div",{"data-testid":B,"data-id":"countdown-wrapper","data-warn":!!le,ref:G,inert:u(!ae),className:n(b,y,!ae&&g),tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:ce,children:xe()}),G.current&&!ae&&t("div",{ref:H,"data-testid":B,"data-id":"fixed-countdown-wrapper","data-warn":!!le,className:n(b,N),tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:ce,children:xe()})]})):t(r,{})};export{I as CountdownTimer};
 //# sourceMappingURL=countdown-timer.js.map

package/countdown-timer/countdown-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown-timer.js","sources":["../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import throttle from \"lodash/throttle\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Countdown,\n    FixedCountdown,\n    TimeLeft,\n    Timer,\n    TimerIcon,\n    Wrapper,\n} from \"./countdown-timer.style\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <TimerIcon $warn={warn} />\n                <TimeLeft>Time left:</TimeLeft>\n                <Timer aria-label={getAccessibleTimeText(remainingSeconds)}>\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </Timer>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderCountdown = () => {\n        return (\n            <Countdown\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                $visible={isVisible}\n                $warn={warn}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </Countdown>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        const left =\n            offset?.left ?? (align === \"left\" ? clientRectX : undefined);\n\n        const right =\n            offset?.right ??\n            (align === \"right\"\n                ? Math.floor(document.body.clientWidth - clientRectRight)\n                : undefined);\n\n        return (\n            <FixedCountdown\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                $warn={warn}\n                $top={offsetY}\n                $left={left}\n                $right={right}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </FixedCountdown>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <Wrapper className={className} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </Wrapper>\n    );\n};\n"],"names":["CountdownTimer","_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","top","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","right","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","TimerIcon","$warn","TimeLeft","Timer","String","padStart","VisuallyHidden","Wrapper","Object","assign","Countdown","inert","inertValue","$visible","tabIndex","role","onFocus","left","undefined","Math","floor","document","body","clientWidth","FixedCountdown","$left","$right","renderFixedCountdown"],"mappings":"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"}
+{"version":3,"file":"countdown-timer.js","sources":["../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    formatUnitValue,\n    useApplyStyle,\n    useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n// @catalog\n/**\n * Displays a live countdown of time remaining until a deadline.\n *\n * Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n * @keywords deadline, expiry, session, timeout, timer\n */\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const isMounted = useIsMounted();\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useApplyStyle(fixedCountdownRef, {\n        [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n        [styles.tokens.fixedCountdown.left]: formatUnitValue(\n            getOffsetLeft(),\n            \"px\"\n        ),\n        [styles.tokens.fixedCountdown.right]: formatUnitValue(\n            getOffsetRight(),\n            \"px\"\n        ),\n    });\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    function getOffsetLeft() {\n        if (!isMounted || align !== \"left\") return undefined;\n        return offset?.left ?? clientRectX;\n    }\n\n    function getOffsetRight() {\n        if (!isMounted || align !== \"right\") return undefined;\n        return (\n            offset?.right ??\n            Math.floor(document.body.clientWidth - clientRectRight)\n        );\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n                <div className={styles.timeLeft}>Time left:</div>\n                <div\n                    className={styles.timer}\n                    aria-label={getAccessibleTimeText(remainingSeconds)}\n                >\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </div>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderInlineCountdown = () => {\n        return (\n            <div\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                data-warn={!!warn}\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                className={clsx(\n                    styles.countdown,\n                    styles.countdownInline,\n                    !isVisible && styles.countdownHidden\n                )}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        return (\n            <div\n                ref={fixedCountdownRef}\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                data-warn={!!warn}\n                className={clsx(styles.countdown, styles.countdownFixed)}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderInlineCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </div>\n    );\n};\n"],"names":["CountdownTimer","_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}

package/countdown-timer/countdown-timer.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const tokens: {
+    readonly fixedCountdown: {
+        readonly top: "--fds-internal-countdownTimer-fixedCountdown-top";
+        readonly left: "--fds-internal-countdownTimer-fixedCountdown-left";
+        readonly right: "--fds-internal-countdownTimer-fixedCountdown-right";
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const countdown: import("@linaria/core").LinariaClassName;
+export declare const countdownHidden: import("@linaria/core").LinariaClassName;
+export declare const countdownInline: import("@linaria/core").LinariaClassName;
+export declare const countdownFixed: import("@linaria/core").LinariaClassName;
+export declare const timeLeft: import("@linaria/core").LinariaClassName;
+export declare const timer: import("@linaria/core").LinariaClassName;
+export declare const timerIcon: import("@linaria/core").LinariaClassName;

package/countdown-timer/countdown-timer.styles.js

@@ -0,0 +1,2 @@
+import"./countdown-timer.styles_ipn1b0.css";const t={fixedCountdown:{top:"--fds-internal-countdownTimer-fixedCountdown-top",left:"--fds-internal-countdownTimer-fixedCountdown-left",right:"--fds-internal-countdownTimer-fixedCountdown-right"}},n="wav7a6b",o="c1ji5mw9",i="csdqyky",d="cibq1kp",e="c1ehax2j",r="t6f42l5",w="t19x1azi",c="t1pvvziw";export{o as countdown,e as countdownFixed,i as countdownHidden,d as countdownInline,r as timeLeft,w as timer,c as timerIcon,t as tokens,n as wrapper};
+//# sourceMappingURL=countdown-timer.styles.js.map

package/countdown-timer/countdown-timer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown-timer.styles.js","sources":["../../src/countdown-timer/countdown-timer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n    fixedCountdown: {\n        top: \"--fds-internal-countdownTimer-fixedCountdown-top\",\n        left: \"--fds-internal-countdownTimer-fixedCountdown-left\",\n        right: \"--fds-internal-countdownTimer-fixedCountdown-right\",\n    },\n} as const;\n\nexport const wrapper = css`\n    width: 100%;\n`;\n\nexport const countdown = css`\n    ${Font[\"body-baseline-regular\"]}\n    display: flex;\n    align-items: center;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]};\n    color: ${Colour[\"text-primary\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]};\n    border-color: ${Colour[\"border-primary\"]};\n    background-color: ${Colour[\"bg\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-warn=\"true\"] {\n        color: ${Colour[\"text-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n`;\n\nexport const countdownHidden = css`\n    opacity: 0;\n`;\n\nexport const countdownInline = css`\n    position: relative;\n`;\n\nexport const countdownFixed = css`\n    position: fixed;\n    z-index: 10;\n\n    /* reset variables to prevent leaking to child components */\n    ${tokens.fixedCountdown.top}: initial;\n    ${tokens.fixedCountdown.left}: initial;\n    ${tokens.fixedCountdown.right}: initial;\n    top: var(${tokens.fixedCountdown.top});\n    left: var(${tokens.fixedCountdown.left});\n    right: var(${tokens.fixedCountdown.right});\n\n    box-shadow: ${Shadow[\"xs-focus-strong\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        left: 0;\n        right: 0;\n        border-radius: 0;\n        border-left: none;\n        border-right: none;\n        box-shadow: none;\n    }\n\n    &[data-warn=\"true\"] {\n        box-shadow: ${Shadow[\"xs-error-strong\"]};\n    }\n`;\n\nexport const timeLeft = css`\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    margin-left: ${Spacing[\"spacing-8\"]};\n    margin-right: ${Spacing[\"spacing-24\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-48\"]};\n    }\n`;\n\nexport const timer = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    margin-left: auto;\n`;\n\nexport const timerIcon = css`\n    color: ${Colour[\"icon-primary\"]};\n\n    &[data-warn=\"true\"] {\n        color: ${Colour[\"icon-error\"]};\n    }\n`;\n"],"names":["tokens","fixedCountdown","top","left","right","wrapper","countdown","countdownHidden","countdownInline","countdownFixed","timeLeft","timer","timerIcon"],"mappings":"2EAYO,MAAMA,EAAS,CAClBC,eAAgB,CACZC,IAAK,mDACLC,KAAM,oDACNC,MAAO,uDAIFC,EAAO,UAIPC,EAAS,WAqBTC,EAAe,UAIfC,EAAe,UAIfC,EAAc,WA4BdC,EAAQ,UAURC,EAAK,WAKLC,EAAS"}

package/countdown-timer/countdown-timer.styles_ipn1b0.css

@@ -0,0 +1,8 @@
+@layer fds{.wav7a6b{width:100%;}
+.c1ji5mw9{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);color:var(--fds-colour-text-primary);border:var(--fds-border-width-010) var(--fds-border-style-solid);border-color:var(--fds-colour-border-primary);background-color:var(--fds-colour-bg);}:where(body.fds-breakpoint-sm-max) .c1ji5mw9{padding:var(--fds-spacing-16);}.c1ji5mw9[data-warn="true"]{color:var(--fds-colour-text-error);border-color:var(--fds-colour-border-error);}
+.csdqyky{opacity:0;}
+.cibq1kp{position:relative;}
+.c1ehax2j{position:fixed;z-index:10;--fds-internal-countdownTimer-fixedCountdown-top:initial;--fds-internal-countdownTimer-fixedCountdown-left:initial;--fds-internal-countdownTimer-fixedCountdown-right:initial;top:var(--fds-internal-countdownTimer-fixedCountdown-top);left:var(--fds-internal-countdownTimer-fixedCountdown-left);right:var(--fds-internal-countdownTimer-fixedCountdown-right);box-shadow:var(--fds-shadow-xs-focus-strong);}:where(body.fds-breakpoint-sm-max) .c1ehax2j{left:0;right:0;border-radius:0;border-left:none;border-right:none;box-shadow:none;}.c1ehax2j[data-warn="true"]{box-shadow:var(--fds-shadow-xs-error-strong);}
+.t6f42l5{font-weight:var(--fds-font-weight-bold);margin-left:var(--fds-spacing-8);margin-right:var(--fds-spacing-24);}:where(body.fds-breakpoint-sm-max) .t6f42l5{margin-right:var(--fds-spacing-48);}
+.t19x1azi{font-weight:var(--fds-font-weight-semibold);margin-left:auto;}
+.t1pvvziw{color:var(--fds-colour-icon-primary);}.t1pvvziw[data-warn="true"]{color:var(--fds-colour-icon-error);}}

package/countdown-timer/types.d.ts

@@ -8,37 +8,81 @@ interface Offset {
 interface MobileOffset {
     top?: number | undefined;
 }
+/** Base props shared by both the `timer`-based and `timestamp`-based variants. */
 interface CountdownTimerBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
-    /** To show/play the countdown timer */
+    /** Controls whether the timer is visible and actively counting down. */
     show: boolean;
+    /**
+     * When `true`, the timer switches to a fixed viewport overlay once its
+     * inline position scrolls out of view, keeping the countdown visible at
+     * all times.
+     *
+     * @default true
+     */
     fixed?: boolean | undefined;
-    /** Specifies a timer (in seconds) for notifications */
+    /**
+     * Remaining-seconds threshold at which the warning state activates.
+     * Once the countdown reaches this value, `onNotify` fires once and
+     * `onTick` fires every second until the timer finishes.
+     */
     notifyTimer?: number | undefined;
-    /** Allows customization of the sticky position in tablet/desktop view */
+    /**
+     * Fine-tunes the fixed overlay position on tablet and desktop viewports.
+     *
+     * @remarks `top` defaults to 168 when not provided; `left`/`right`
+     * fall back to the bounding-rect of the inline wrapper.
+     */
     offset?: Offset | undefined;
-    /** Allows customization of the sticky position in mobile only */
+    /**
+     * Fine-tunes the fixed overlay position on mobile viewports.
+     *
+     * @default { top: 80 }
+     */
     mobileOffset?: MobileOffset | undefined;
-    /** Specifies if the component is aligned to its left or right in its sticky position */
+    /**
+     * Side of the inline wrapper the fixed overlay is pinned to when
+     * scrolled into sticky mode.
+     *
+     * @default "right"
+     */
     align?: AlignPosition | undefined;
-    /** Called every second with the remaining time left when the timer value falls below the `notifyTimer` threshold */
+    /**
+     * Called every second with the remaining seconds once the countdown falls
+     * at or below `notifyTimer`.
+     */
     onTick?: ((seconds: number) => void) | undefined;
-    /** Called when the timer value falls below the specified `notifyTimer` threshold */
+    /**
+     * Called once when the remaining seconds first reach the `notifyTimer`
+     * threshold.
+     *
+     * @remarks Fires at most once per timer session; resets when `show` or
+     * `timer`/`timestamp` changes.
+     */
     onNotify?: (() => void) | undefined;
-    /** Called when countdown reaches 0 */
+    /** Called when the countdown reaches zero. */
     onFinish?: (() => void) | undefined;
-    /** Specifies the interval (in seconds) between polite announcements of the remaining time left */
+    /**
+     * Interval in seconds between polite screen-reader announcement of the
+     * remaining time while the timer is above the `notifyTimer`
+     * threshold.
+     *
+     * @default 120
+     */
     reminderInterval?: number | undefined;
 }
-interface TimerProps extends CountdownTimerBaseProps {
-    /** Specifies the countdown timer (in seconds) */
+/** Props for the duration-based variant. */
+interface TimerProps {
+    /** Duration of the countdown in seconds. */
     timer: number;
     timestamp?: number | undefined;
 }
-interface TimestampProps extends CountdownTimerBaseProps {
-    /** Specifies the timestamp at which the countdown ends (milliseconds since Jan 1, 1970) */
+/** Props for the deadline-based variant. */
+interface TimestampProps {
+    /** Unix timestamp (milliseconds since Jan 1, 1970) at which the countdown ends. */
     timestamp: number;
     timer?: number | undefined;
 }
-export type CountdownTimerProps = TimerProps | TimestampProps;
+/** Props for `CountdownTimer` component. */
+export type CountdownTimerProps = CountdownTimerBaseProps & (TimerProps | TimestampProps);
 export {};

package/dashed-border/dashed-border.d.ts

@@ -1,2 +1,9 @@
 import type { DashedBorderProps } from "./types";
+/**
+ * A container that renders a dashed border using an SVG overlay.
+ *
+ * Use when you need a dashed visual boundary around content — for example, drop zones,
+ * placeholder regions, or empty-state containers.
+ * @keywords boundary, outline, region
+ */
 export declare const DashedBorder: (props: DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dashed-border/dashed-border.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as o}from"react/jsx-runtime";import t from"clsx";import{forwardRef as s,useRef as i}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import{BorderThickness as m}from"../theme/tokens/border.js";import{Colour as l}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as n}from"../theme/tokens/radius.js";import{toCssValue as a}from"../theme/utils/token-resolver.js";import{useApplyStyle as u}from"../theme/utils/use-apply-styles.js";import{useResolvedTokenValue as d}from"../theme/utils/use-design-token.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as c}from"../util/merge-refs.js";import"../util/string-helper.js";import{root as p,overlay as h,tokens as k}from"./dashed-border.styles.js";import{isThicknessToken as f,isRadiusToken as j,isColourToken as b,createSvgBackgroundImage as g}from"./dashed-border.utils.js";const v=s(((s,v)=>{const{enabled:y=!0,thickness:C=m["width-010"],radius:x=n.none,colour:z=l.border,backgroundColor:N,className:T,children:w}=s,B=e(s,["enabled","thickness","radius","colour","backgroundColor","className","children"]),S=d({value:C,fallback:m["width-010"],isToken:f,normalizeCustom:a}),_=d({value:x,fallback:n.none,isToken:j,normalizeCustom:a}),q=d({value:z,fallback:l.border,isToken:b,normalizeCustom:String}),I=d({value:N,fallback:"none",isToken:b,normalizeCustom:String}),O=y||!!N,R=g({radius:_,colour:q,thickness:S,enabled:y}),A=i(null),D=i(null),E=v?c(A,v):A;return u(A,{[k.rootRadius]:_,[k.rootBackgroundColor]:N?I:null}),u(D,{[k.overlayBackgroundImage]:O?R:null}),r("div",Object.assign({ref:E,className:t(p,T)},B,{children:[O&&o("div",{"aria-hidden":"true",className:h,ref:D}),w]}))}));export{v as DashedBorder};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as o}from"react/jsx-runtime";import t from"clsx";import{forwardRef as s,useRef as i}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import{BorderThickness as m}from"../theme/tokens/border.js";import{Colour as l}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as a}from"../theme/tokens/radius.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import{useResolvedTokenValue as u}from"../theme/utils/use-design-token.js";import"../theme/utils/use-media-query.js";import{toCssValue as d}from"../theme/utils/token-resolver.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as p}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{isColourToken as c,isRadiusToken as h,isThicknessToken as j}from"../util/styling-helper.js";import{tokens as f,root as k,overlay as b}from"./dashed-border.styles.js";import{createSvgBackgroundImage as g}from"./dashed-border.utils.js";const v=s(((s,v)=>{const{enabled:y=!0,thickness:C=m["width-010"],radius:x=a.none,colour:z=l.border,backgroundColor:N,className:T,children:q}=s,w=e(s,["enabled","thickness","radius","colour","backgroundColor","className","children"]),B=u({value:C,fallback:m["width-010"],isToken:j,normalizeCustom:d}),S=u({value:x,fallback:a.none,isToken:h,normalizeCustom:d}),_=u({value:z,fallback:l.border,isToken:c,normalizeCustom:String}),I=u({value:N,fallback:"none",isToken:c,normalizeCustom:String}),O=y||!!N,R=g({radius:S,colour:_,thickness:B,enabled:y}),A=i(null),D=i(null),E=v?p(A,v):A;return n(A,{[f.rootRadius]:S,[f.rootBackgroundColor]:N?I:null}),n(D,{[f.overlayBackgroundImage]:O?R:null}),r("div",Object.assign({ref:E,className:t(k,T)},w,{children:[O&&o("div",{"aria-hidden":"true",className:b,ref:D}),q]}))}));export{v as DashedBorder};
 //# sourceMappingURL=dashed-border.js.map

package/dashed-border/dashed-border.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport {\n    BorderThickness,\n    Colour,\n    Radius,\n    toCssValue,\n    useApplyStyle,\n    useResolvedTokenValue,\n} from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./dashed-border.styles\";\nimport {\n    createSvgBackgroundImage,\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"ohCAqBA,MAqFaA,EAAeC,GArFV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}
+{"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A container that renders a dashed border using an SVG overlay.\n *\n * Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n * @keywords boundary, outline, region\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+qCAeA,MA6FaA,EAAeC,GA7FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}

package/dashed-border/dashed-border.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.styles.js","sources":["../../src/dashed-border/dashed-border.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    rootRadius: \"--fds-internal-dashedBorder-root-radius\",\n    rootBackgroundColor: \"--fds-internal-dashedBorder-root-backgroundColor\",\n    overlayBackgroundImage:\n        \"--fds-internal-dashedBorder-overlay-backgroundImage\",\n} as const;\n\nexport const root = css`\n    position: relative;\n    overflow: hidden;\n    border-radius: var(${tokens.rootRadius}, 0);\n    background-color: var(${tokens.rootBackgroundColor}, transparent);\n`;\n\nexport const overlay = css`\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    background-image: var(${tokens.overlayBackgroundImage}, none);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: 100% 100%;\n    pointer-events: none;\n`;\n"],"names":["tokens","rootRadius","rootBackgroundColor","overlayBackgroundImage","root","overlay"],"mappings":"yDAEO,MAAMA,EAAS,CAClBC,WAAY,0CACZC,oBAAqB,mDACrBC,uBACI,uDAGKC,EAAI,WAOJC,EAAO"}
+{"version":3,"file":"dashed-border.styles.js","sources":["../../src/dashed-border/dashed-border.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    rootRadius: \"--fds-internal-dashedBorder-root-radius\",\n    rootBackgroundColor: \"--fds-internal-dashedBorder-root-backgroundColor\",\n    overlayBackgroundImage:\n        \"--fds-internal-dashedBorder-overlay-backgroundImage\",\n} as const;\n\nexport const root = css`\n    position: relative;\n    overflow: hidden;\n    border-radius: var(${tokens.rootRadius}, 0);\n    background-color: var(${tokens.rootBackgroundColor}, transparent);\n`;\n\nexport const overlay = css`\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    background-image: var(${tokens.overlayBackgroundImage}, none);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: 100% 100%;\n    pointer-events: none;\n`;\n"],"names":["tokens","rootRadius","rootBackgroundColor","overlayBackgroundImage","root","overlay"],"mappings":"uEAEO,MAAMA,EAAS,CAClBC,WAAY,0CACZC,oBAAqB,mDACrBC,uBACI,uDAGKC,EAAI,WAOJC,EAAO"}

package/dashed-border/dashed-border.styles_zszoox.css

@@ -1,2 +1,2 @@
-.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
-.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}
+@layer fds{.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
+.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}}

package/dashed-border/dashed-border.utils.d.ts

@@ -1,6 +1,3 @@
-import type { ColourCSSVariableString, RadiusCSSVariableString } from "../theme";
-import { BorderThickness } from "../theme";
-import type { ValueOf } from "../util/utility-types";
 export interface CreateSvgBackgroundImageOptions {
     /** Resolved stroke color for the dashed border. */
     colour: string;
@@ -11,9 +8,6 @@ export interface CreateSvgBackgroundImageOptions {
     /** Resolved stroke width for the dashed border. */
     thickness: string;
 }
-export declare const isRadiusToken: (value: unknown) => value is RadiusCSSVariableString;
-export declare const isThicknessToken: (value: unknown) => value is ValueOf<typeof BorderThickness>;
-export declare const isColourToken: (value: unknown) => value is ColourCSSVariableString;
 /**
  * Builds a data-URI SVG used as the dashed border background image.
  * @param options SVG background image options.

package/dashed-border/dashed-border.utils.js

@@ -1,2 +1,2 @@
-import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{BorderThickness as e}from"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as t}from"../theme/tokens/radius.js";import{isTokenFromSet as r,isTokenWithPrefix as o}from"../theme/utils/token-resolver.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";const s=new Set(Object.values(t)),n=new Set(Object.values(e)),i=e=>r(e,s),m=e=>r(e,n),h=e=>o(e,"var(--fds-colour-"),a=({colour:e,enabled:t,radius:r,thickness:o})=>`url("data:image/svg+xml,${encodeURIComponent(`\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${r}'\n            ry='${r}'\n            stroke='${t?e:"none"}'\n            stroke-width='${t?o:0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`)}")`;export{a as createSvgBackgroundImage,h as isColourToken,i as isRadiusToken,m as isThicknessToken};
+const n=({colour:n,enabled:e,radius:t,thickness:s})=>`url("data:image/svg+xml,${encodeURIComponent(`\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${t}'\n            ry='${t}'\n            stroke='${e?n:"none"}'\n            stroke-width='${e?s:0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`)}")`;export{n as createSvgBackgroundImage};
 //# sourceMappingURL=dashed-border.utils.js.map

package/dashed-border/dashed-border.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.utils.js","sources":["../../src/dashed-border/dashed-border.utils.ts"],"sourcesContent":["import type {\n    ColourCSSVariableString,\n    RadiusCSSVariableString,\n} from \"../theme\";\nimport {\n    BorderThickness,\n    isTokenFromSet,\n    isTokenWithPrefix,\n    Radius,\n} from \"../theme\";\nimport type { ValueOf } from \"../util/utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport interface CreateSvgBackgroundImageOptions {\n    /** Resolved stroke color for the dashed border. */\n    colour: string;\n    /** Whether dashed stroke should be rendered. */\n    enabled: boolean;\n    /** Resolved CSS border radius for the SVG rect. */\n    radius: string;\n    /** Resolved stroke width for the dashed border. */\n    thickness: string;\n}\n\nexport const isRadiusToken = (\n    value: unknown\n): value is RadiusCSSVariableString => {\n    return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n    value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n    return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n        value,\n        thicknessTokenSet\n    );\n};\n\nexport const isColourToken = (\n    value: unknown\n): value is ColourCSSVariableString => {\n    return isTokenWithPrefix<ColourCSSVariableString>(\n        value,\n        \"var(--fds-colour-\"\n    );\n};\n\n/**\n * Builds a data-URI SVG used as the dashed border background image.\n * @param options SVG background image options.\n * @returns Encoded SVG as CSS `url(...)` string.\n */\nexport const createSvgBackgroundImage = ({\n    colour,\n    enabled,\n    radius,\n    thickness,\n}: CreateSvgBackgroundImageOptions) => {\n    const svg = `\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${radius}'\n            ry='${radius}'\n            stroke='${enabled ? colour : \"none\"}'\n            stroke-width='${enabled ? thickness : 0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`;\n\n    return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","isRadiusToken","value","isTokenFromSet","isThicknessToken","isColourToken","isTokenWithPrefix","createSvgBackgroundImage","colour","enabled","radius","thickness","encodeURIComponent"],"mappings":"8fAYA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,IAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,IAa3CC,EACTC,GAEOC,EAAwCD,EAAOR,GAG7CU,EACTF,GAEOC,EACHD,EACAH,GAIKM,EACTH,GAEOI,EACHJ,EACA,qBASKK,EAA2B,EACpCC,SACAC,UACAC,SACAC,eAcO,2BAA2BC,mBAZtB,iKAIEF,uBACAA,2BACID,EAAUD,EAAS,sCACbC,EAAUE,EAAY"}
+{"version":3,"file":"dashed-border.utils.js","sources":["../../src/dashed-border/dashed-border.utils.ts"],"sourcesContent":["export interface CreateSvgBackgroundImageOptions {\n    /** Resolved stroke color for the dashed border. */\n    colour: string;\n    /** Whether dashed stroke should be rendered. */\n    enabled: boolean;\n    /** Resolved CSS border radius for the SVG rect. */\n    radius: string;\n    /** Resolved stroke width for the dashed border. */\n    thickness: string;\n}\n\n/**\n * Builds a data-URI SVG used as the dashed border background image.\n * @param options SVG background image options.\n * @returns Encoded SVG as CSS `url(...)` string.\n */\nexport const createSvgBackgroundImage = ({\n    colour,\n    enabled,\n    radius,\n    thickness,\n}: CreateSvgBackgroundImageOptions) => {\n    const svg = `\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${radius}'\n            ry='${radius}'\n            stroke='${enabled ? colour : \"none\"}'\n            stroke-width='${enabled ? thickness : 0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`;\n\n    return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n};\n"],"names":["createSvgBackgroundImage","colour","enabled","radius","thickness","encodeURIComponent"],"mappings":"AAgBO,MAAMA,EAA2B,EACpCC,SACAC,UACAC,SACAC,eAcO,2BAA2BC,mBAZtB,iKAIEF,uBACAA,2BACID,EAAUD,EAAS,sCACbC,EAAUE,EAAY"}

package/dashed-border/types.d.ts

@@ -2,16 +2,38 @@ import type { BorderThickness, ColourCSSVariableString, RadiusCSSVariableString
 import type { ValueOf } from "../util/utility-types";
 type CustomCssValue = number | (string & {});
 type CustomCssString = string & {};
+/** Props for the `DashedBorder` component. */
 export interface DashedBorderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "style"> {
-    /** Optional background fill behind the dashed overlay. */
+    /**
+     * Optional background fill applied inside the container, behind the dashed overlay.
+     *
+     * @remarks If this prop is provided, the background colour remains
+     * visible even when `enabled` is `false`
+     */
     backgroundColor?: ColourCSSVariableString | CustomCssString | undefined;
-    /** Border stroke colour for the dashed border. */
+    /**
+     * Stroke colour for the dashed border.
+     *
+     * @default Colour["border"]
+     */
     colour?: ColourCSSVariableString | CustomCssString | undefined;
-    /** Enables or disables rendering of the dashed stroke. */
+    /**
+     * Whether the dashed stroke is rendered.
+     *
+     * @default true
+     */
     enabled?: boolean | undefined;
-    /** Border radius of the dashed container. */
+    /**
+     * Corner radius of the container and the dashed stroke.
+     *
+     * @default Radius["none"]
+     */
     radius?: RadiusCSSVariableString | CustomCssValue | undefined;
-    /** Border thickness of the dashed stroke. */
+    /**
+     * Width of the dashed stroke.
+     *
+     * @default BorderThickness["width-010"]
+     */
     thickness?: ValueOf<typeof BorderThickness> | CustomCssValue | undefined;
 }
 export {};

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

@@ -1,2 +1,11 @@
 import type { DataTableProps } from "./types";
-export declare const DataTable: ({ id, headers, rows, className, sortIndicators, alternatingRows, loadState, enableMultiSelect, selectedIds, disabledIds, enableActionBar, enableSelectAll, enableStickyHeader, emptyView, actionBarContent, renderCustomEmptyView, onHeaderClick, onSelect, onSelectAll, onClearSelectionClick, ...otherProps }: DataTableProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.
+ *
+ * Use `DataTable` when presenting structured multi-column data that users may need to sort by
+ * column or select rows for bulk actions. Row selection, sort indicators, and the action bar
+ * content are all externally controlled; the component manages scroll detection, sticky-header
+ * positioning, and floating action bar behaviour internally.
+ * @keywords columns, grid, rows, table
+ */
+export declare const DataTable: ({ id, headers, rows, className, sortIndicators, alternatingRows, loadState, enableMultiSelect, selectedIds, disabledIds, enableActionBar, enableActionBarWithoutSelection, enableSelectAll, enableStickyHeader, emptyView, actionBarContent, renderCustomEmptyView, onHeaderClick, onSelect, onSelectAll, onClearSelectionClick, ...otherProps }: DataTableProps) => import("react/jsx-runtime").JSX.Element;