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

package/cjs/theme/theme-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n    {\n        children,\n        theme = \"lifesg\",\n        mode = \"auto\",\n        className,\n        style,\n    }: ThemeProviderProps,\n    ref: Ref<HTMLDivElement>\n) => {\n    const isModeControlled = mode !== \"auto\";\n\n    const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n        isModeControlled ? mode : \"light\"\n    );\n    const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n        null\n    );\n\n    // Re-subscribe when the source node or token set changes:\n    // - `themeElement`: scoped breakpoint tokens may live on this element\n    // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n    useIsomorphicLayoutEffect(() => {\n        const sourceElement = themeElement ?? document.documentElement;\n        const cleanup = setupBreakpointListener(sourceElement);\n        return cleanup;\n    }, [themeElement, theme, computedMode]);\n\n    useEffect(() => {\n        if (isModeControlled) {\n            setComputedMode(mode);\n            return;\n        }\n\n        return listenToSystemColourMode(setComputedMode);\n    }, [isModeControlled, mode]);\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            mode: computedMode,\n            themeElement,\n        }),\n        [theme, computedMode, themeElement]\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <div\n                ref={mergeRefs(ref, setThemeElement)}\n                data-fds-theme={theme}\n                data-fds-theme-mode={computedMode}\n                className={className}\n                style={style}\n            >\n                {children}\n            </div>\n        </ThemeContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n * @keywords context, scope, theming\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n    InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","ThemeContext","Provider","value","mergeRefs"],"mappings":"qdAUA,MAsEaA,EAAgBC,EAAAA,YAtEF,EAEnBC,WACAC,QAAQ,SACRC,OAAO,OACPC,YACAC,SAEJC,KAEA,MAAMC,EAA4B,SAATJ,GAElBK,EAAcC,GAAmBC,EAAAA,SACpCH,EAAmBJ,EAAO,UAEvBQ,EAAcC,GAAmBF,EAAAA,SACpC,MAMJG,EAAAA,2BAA0B,KACtB,MAAMC,EAAgBH,QAAAA,EAAgBI,SAASC,gBAE/C,OADgBC,EAAAA,wBAAwBH,EAC1B,GACf,CAACH,EAAcT,EAAOM,IAEzBU,EAAAA,WAAU,KACN,IAAIX,EAKJ,OAAOY,EAAAA,yBAAyBV,GAJ5BA,EAAgBN,EAI4B,GACjD,CAACI,EAAkBJ,IAEtB,MAAMiB,EAAeC,EAAAA,SACjB,KAAA,CACInB,QACAC,KAAMK,EACNG,kBAEJ,CAACT,EAAOM,EAAcG,IAG1B,OACIW,MAACC,EAAAA,aAAaC,UAASC,MAAOL,EAAYnB,SACtCqB,EAAAA,WACIhB,IAAKoB,EAAAA,UAAUpB,EAAKM,GAAgB,iBACpBV,EAAK,sBACAM,EACrBJ,UAAWA,EACXC,MAAOA,EAAKJ,SAEXA,KAEe"}
+{"version":3,"file":"index.js","sources":["../../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n    {\n        children,\n        theme = \"lifesg\",\n        mode = \"auto\",\n        className,\n        style,\n        fontPreset,\n    }: ThemeProviderProps,\n    ref: Ref<HTMLDivElement>\n) => {\n    const isModeControlled = mode !== \"auto\";\n\n    const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n        isModeControlled ? mode : \"light\"\n    );\n    const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n        null\n    );\n\n    const themeContext = useContext(ThemeContext);\n    const isNestedThemeProvider = !!themeContext;\n\n    // Re-subscribe when the source node or token set changes:\n    // - `themeElement`: scoped breakpoint tokens may live on this element\n    // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n    useIsomorphicLayoutEffect(() => {\n        // Only set up the breakpoint listener once in the root theme provider\n        if (isNestedThemeProvider) return;\n\n        const sourceElement = themeElement ?? document.documentElement;\n        const cleanup = setupBreakpointListener(sourceElement);\n        return cleanup;\n    }, [themeElement, theme, computedMode, isNestedThemeProvider]);\n\n    useEffect(() => {\n        if (isModeControlled) {\n            setComputedMode(mode);\n            return;\n        }\n\n        return listenToSystemColourMode(setComputedMode);\n    }, [isModeControlled, mode]);\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            mode: computedMode,\n            fontPreset,\n            themeElement,\n        }),\n        [theme, computedMode, fontPreset, themeElement]\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <div\n                ref={mergeRefs(ref, setThemeElement)}\n                data-fds-theme={theme}\n                data-fds-theme-font={fontPreset}\n                data-fds-theme-mode={computedMode}\n                className={className}\n                style={style}\n            >\n                {children}\n            </div>\n        </ThemeContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n * @keywords context, scope, theming\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n    InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","fontPreset","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","isNestedThemeProvider","useContext","ThemeContext","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","Provider","value","mergeRefs"],"mappings":"qdAUA,MA+EaA,EAAgBC,EAAAA,YA/EF,EAEnBC,WACAC,QAAQ,SACRC,OAAO,OACPC,YACAC,QACAC,cAEJC,KAEA,MAAMC,EAA4B,SAATL,GAElBM,EAAcC,GAAmBC,EAAAA,SACpCH,EAAmBL,EAAO,UAEvBS,EAAcC,GAAmBF,EAAAA,SACpC,MAIEG,IADeC,EAAAA,WAAWC,gBAMhCC,EAAAA,2BAA0B,KAEtB,GAAIH,EAAuB,OAE3B,MAAMI,EAAgBN,QAAAA,EAAgBO,SAASC,gBAE/C,OADgBC,EAAAA,wBAAwBH,EAC1B,GACf,CAACN,EAAcV,EAAOO,EAAcK,IAEvCQ,EAAAA,WAAU,KACN,IAAId,EAKJ,OAAOe,EAAAA,yBAAyBb,GAJ5BA,EAAgBP,EAI4B,GACjD,CAACK,EAAkBL,IAEtB,MAAMqB,EAAeC,EAAAA,SACjB,KAAA,CACIvB,QACAC,KAAMM,EACNH,aACAM,kBAEJ,CAACV,EAAOO,EAAcH,EAAYM,IAGtC,OACIc,EAAAA,IAACV,EAAAA,aAAaW,UAASC,MAAOJ,EAAYvB,SACtCyB,EAAAA,WACInB,IAAKsB,EAAAA,UAAUtB,EAAKM,GAAgB,iBACpBX,wBACKI,EAAU,sBACVG,EACrBL,UAAWA,EACXC,MAAOA,EAAKJ,SAEXA,KAEe"}

package/cjs/theme/types.js

@@ -1,2 +1,2 @@
-"use strict";exports.THEME_TYPES=["a11y-playground","bookingsg","careercompass","ccube","imda","lifesg","mylegacy","oneservice","pa","rbs","sgw-digital-lobby","smgs","spf","supportgowhere","tote-board"];
+"use strict";exports.THEME_FONT_PRESETS=["wise-public","wise-admin","sportsg-gms"],exports.THEME_TYPES=["a11y-playground","bookingsg","careercompass","ccube","imda","lifesg","mylegacy","oneservice","pa","rbs","sgw-digital-lobby","smgs","spf","sportsg-orange","supportgowhere","tote-board","vica","websg","wise","wogaa"];
 //# sourceMappingURL=types.js.map

package/cjs/theme/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/theme/types.ts"],"sourcesContent":["import type { ValueOf } from \"../util/utility-types\";\nimport type {\n    Border,\n    Breakpoint,\n    ComponentToken,\n    FontSpec,\n    Motion,\n    PrimitiveColours,\n    Radius,\n    SemanticColours,\n    Shadow,\n    Spacing,\n} from \"./tokens\";\n\n/** All available theme names. */\nexport const THEME_TYPES = [\n    \"a11y-playground\",\n    \"bookingsg\",\n    \"careercompass\",\n    \"ccube\",\n    \"imda\",\n    \"lifesg\",\n    \"mylegacy\",\n    \"oneservice\",\n    \"pa\",\n    \"rbs\",\n    \"sgw-digital-lobby\",\n    \"smgs\",\n    \"spf\",\n    \"supportgowhere\",\n    \"tote-board\",\n] as const;\n\n/** Union of all supported theme names. */\nexport type ThemeType = (typeof THEME_TYPES)[number];\n/**\n * Colour mode accepted by `ThemeProvider`.\n * — `\"auto\"` follows OS preference.\n * - `\"light\"` light mode.\n * - `\"dark\"` dark mode.\n */\nexport type ThemeMode = \"light\" | \"dark\" | \"auto\";\n\n/** Resolved colour mode. */\nexport type ResolvedThemeMode = \"light\" | \"dark\";\n\n/** Available typography size presets. */\nexport type FontSize =\n    | \"heading-xxl\"\n    | \"heading-xl\"\n    | \"heading-lg\"\n    | \"heading-md\"\n    | \"heading-sm\"\n    | \"heading-xs\"\n    | \"body-baseline\"\n    | \"body-md\"\n    | \"body-sm\"\n    | \"body-xs\"\n    | \"form-label\"\n    | \"form-description\";\n\n/** Available typography weight presets. */\nexport type FontWeight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\n/** Accepted breakpoint CSS variable strings. */\nexport type BreakpointCSSVariableString = ValueOf<typeof Breakpoint>;\n/** Accepted border CSS variable strings. */\nexport type BorderCSSVariableString = ValueOf<typeof Border>;\n/** Accepted component-scoped CSS variable strings. */\nexport type ComponentTokenCSSVariableString =\n    | ValueOf<typeof ComponentToken.Animation>\n    | ValueOf<typeof ComponentToken.Button>\n    | ValueOf<typeof ComponentToken.Footer>\n    | ValueOf<typeof ComponentToken.Navbar>;\n/** Accepted font CSS variable strings. */\nexport type FontSpecCSSVariableString = ValueOf<typeof FontSpec>;\n/** Accepted motion CSS variable strings. */\nexport type MotionCSSVariableString = ValueOf<typeof Motion>;\n/** Accepted primitive colour CSS variable strings. */\nexport type PrimitiveColourCSSVariableString = ValueOf<typeof PrimitiveColours>;\n/** Accepted radius CSS variable strings. */\nexport type RadiusCSSVariableString = ValueOf<typeof Radius>;\n/** Accepted semantic colour CSS variable strings. */\nexport type SemanticColourCSSVariableString = ValueOf<typeof SemanticColours>;\n/** Accepted colour CSS variable strings. */\nexport type ColourCSSVariableString =\n    | PrimitiveColourCSSVariableString\n    | SemanticColourCSSVariableString;\n/** Accepted shadow CSS variable strings. */\nexport type ShadowCSSVariableString = ValueOf<typeof Shadow>;\n/** Accepted spacing and layout CSS variable strings. */\nexport type SpacingCSSVariableString = ValueOf<typeof Spacing>;\n\n/** Union of all design-token CSS variable string literals. */\nexport type CSSVariableString =\n    | BreakpointCSSVariableString\n    | BorderCSSVariableString\n    | ColourCSSVariableString\n    | ComponentTokenCSSVariableString\n    | FontSpecCSSVariableString\n    | MotionCSSVariableString\n    | RadiusCSSVariableString\n    | ShadowCSSVariableString\n    | SpacingCSSVariableString;\n"],"names":[],"mappings":"iCAe2B,CACvB,kBACA,YACA,gBACA,QACA,OACA,SACA,WACA,aACA,KACA,MACA,oBACA,OACA,MACA,iBACA"}
+{"version":3,"file":"types.js","sources":["../../../src/theme/types.ts"],"sourcesContent":["import type { ValueOf } from \"../util/utility-types\";\nimport type {\n    Border,\n    Breakpoint,\n    ComponentToken,\n    FontSpec,\n    Motion,\n    PrimitiveColours,\n    Radius,\n    SemanticColours,\n    Shadow,\n    Spacing,\n} from \"./tokens\";\n\n/** All available theme names. */\nexport const THEME_TYPES = [\n    \"a11y-playground\",\n    \"bookingsg\",\n    \"careercompass\",\n    \"ccube\",\n    \"imda\",\n    \"lifesg\",\n    \"mylegacy\",\n    \"oneservice\",\n    \"pa\",\n    \"rbs\",\n    \"sgw-digital-lobby\",\n    \"smgs\",\n    \"spf\",\n    \"sportsg-orange\",\n    \"supportgowhere\",\n    \"tote-board\",\n    \"vica\",\n    \"websg\",\n    \"wise\",\n    \"wogaa\",\n] as const;\n\n/** Union of all supported theme names. */\nexport type ThemeType = (typeof THEME_TYPES)[number];\n\n/**\n * All available theme presets.\n * For WISE product themes: wise, vica, websg, wogaa\n * For SportSG product themes: sportsg-orange\n *  */\nexport const THEME_FONT_PRESETS = [\n    \"wise-public\",\n    \"wise-admin\",\n    \"sportsg-gms\",\n] as const;\n\n/** Union of all supported font presets. */\nexport type ThemeFontPreset = (typeof THEME_FONT_PRESETS)[number];\n\n/**\n * Colour mode accepted by `ThemeProvider`.\n * — `\"auto\"` follows OS preference.\n * - `\"light\"` light mode.\n * - `\"dark\"` dark mode.\n */\nexport type ThemeMode = \"light\" | \"dark\" | \"auto\";\n\n/** Resolved colour mode. */\nexport type ResolvedThemeMode = \"light\" | \"dark\";\n\n/** Available typography size presets. */\nexport type FontSize =\n    | \"heading-xxl\"\n    | \"heading-xl\"\n    | \"heading-lg\"\n    | \"heading-md\"\n    | \"heading-sm\"\n    | \"heading-xs\"\n    | \"body-baseline\"\n    | \"body-md\"\n    | \"body-sm\"\n    | \"body-xs\"\n    | \"form-label\"\n    | \"form-description\";\n\n/** Available typography weight presets. */\nexport type FontWeight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\n/** Accepted breakpoint CSS variable strings. */\nexport type BreakpointCSSVariableString = ValueOf<typeof Breakpoint>;\n/** Accepted border CSS variable strings. */\nexport type BorderCSSVariableString = ValueOf<typeof Border>;\n/** Accepted component-scoped CSS variable strings. */\nexport type ComponentTokenCSSVariableString =\n    | ValueOf<typeof ComponentToken.Animation>\n    | ValueOf<typeof ComponentToken.Button>\n    | ValueOf<typeof ComponentToken.Footer>\n    | ValueOf<typeof ComponentToken.Navbar>;\n/** Accepted font CSS variable strings. */\nexport type FontSpecCSSVariableString = ValueOf<typeof FontSpec>;\n/** Accepted motion CSS variable strings. */\nexport type MotionCSSVariableString = ValueOf<typeof Motion>;\n/** Accepted primitive colour CSS variable strings. */\nexport type PrimitiveColourCSSVariableString = ValueOf<typeof PrimitiveColours>;\n/** Accepted radius CSS variable strings. */\nexport type RadiusCSSVariableString = ValueOf<typeof Radius>;\n/** Accepted semantic colour CSS variable strings. */\nexport type SemanticColourCSSVariableString = ValueOf<typeof SemanticColours>;\n/** Accepted colour CSS variable strings. */\nexport type ColourCSSVariableString =\n    | PrimitiveColourCSSVariableString\n    | SemanticColourCSSVariableString;\n/** Accepted shadow CSS variable strings. */\nexport type ShadowCSSVariableString = ValueOf<typeof Shadow>;\n/** Accepted spacing and layout CSS variable strings. */\nexport type SpacingCSSVariableString = ValueOf<typeof Spacing>;\n\n/** Union of all design-token CSS variable string literals. */\nexport type CSSVariableString =\n    | BreakpointCSSVariableString\n    | BorderCSSVariableString\n    | ColourCSSVariableString\n    | ComponentTokenCSSVariableString\n    | FontSpecCSSVariableString\n    | MotionCSSVariableString\n    | RadiusCSSVariableString\n    | ShadowCSSVariableString\n    | SpacingCSSVariableString;\n"],"names":[],"mappings":"wCA8CkC,CAC9B,cACA,aACA,mCAlCuB,CACvB,kBACA,YACA,gBACA,QACA,OACA,SACA,WACA,aACA,KACA,MACA,oBACA,OACA,MACA,iBACA,iBACA,aACA,OACA,QACA,OACA"}

package/docs/component-catalog.json

@@ -478,7 +478,7 @@
         {
             "name": "ModalV2",
             "importPath": "@lifesg/react-design-system/modal-v2",
-            "description": "A composable modal dialog with slot-based content layout.  Use `ModalV2` when you need a controlled overlay dialog with structured content slots.  Sub-components: - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback. - `ModalV2.Content` — container for the body content of the modal card. - `ModalV2.Footer` — footer area for primary and secondary action buttons.",
+            "description": "A composable modal dialog with slot-based content layout.  Use `ModalV2` when you need a controlled overlay dialog with structured content slots.  Sub-components: - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop that makes the card fill the viewport. - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback. - `ModalV2.Content` — container for the body content of the modal card. - `ModalV2.Footer` — footer area for primary and secondary action buttons.",
             "keywords": ["dialog", "overlay", "popup"]
         },
         {

package/file-download/file-download.d.ts

@@ -6,4 +6,4 @@ import type { FileDownloadProps } from "./types";
  * Each file item renders as a card with file metadata and a download trigger.
  * @keywords attachment, document, download, file
  */
-export declare const FileDownload: ({ id, fileItems, title, description, onDownload, "data-testid": testId, className, styleType, }: FileDownloadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileDownload: ({ id, fileItems, title, description, onDownload, onClick, "data-testid": testId, className, styleType, }: FileDownloadProps) => import("react/jsx-runtime").JSX.Element;

package/file-download/file-download.js

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import i from"clsx";import{DashedBorder as o}from"../dashed-border/dashed-border.js";import{Markup as s}from"../markup/markup.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{Border as m}from"../theme/tokens/border.js";import{Colour as d}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as l}from"../theme/tokens/radius.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"../theme/utils/use-media-query.js";import{textContainer as a,listWrapper as n,container as p,containerBordered as c,title as h,titleContainer as f,description as u,descriptionContainer as j}from"./file-download.styles.js";import{FileListCard as b}from"./file-list-card/file-list-card.js";const y=({id:y,fileItems:x,title:k,description:v,onDownload:N,"data-testid":g,className:w,styleType:T="bordered"})=>{const q=r=>e(void 0,void 0,void 0,(function*(){N&&(yield N(r))})),z="bordered"===T;return r(o,{id:y?`${y}-file-download`:"file-download",className:i(p,z&&c,w),"data-testid":g,enabled:z,thickness:m["width-040"],radius:l.sm,colour:d.border,children:[(k||v)&&r("div",{className:a,children:[k?"string"==typeof k?t("p",{className:h,children:k}):t(s,{className:f,baseTextSize:"heading-xs",children:k}):null,v?"string"==typeof v?t("p",{className:u,children:v}):t(s,{className:j,baseTextSize:"body-md",children:v}):null]}),t("ul",{className:n,children:x&&x.length>0&&x.map((e=>t(b,{fileItem:e,onDownload:q},e.id)))})]})};export{y as FileDownload};
+import{__awaiter as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import i from"clsx";import{DashedBorder as o}from"../dashed-border/dashed-border.js";import{Markup as s}from"../markup/markup.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{Border as m}from"../theme/tokens/border.js";import{Colour as d}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as l}from"../theme/tokens/radius.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"../theme/utils/use-media-query.js";import{textContainer as a,listWrapper as n,container as p,containerBordered as c,title as h,titleContainer as f,description as u,descriptionContainer as j}from"./file-download.styles.js";import{FileListCard as b}from"./file-list-card/file-list-card.js";const y=({id:y,fileItems:k,title:x,description:v,onDownload:N,onClick:g,"data-testid":w,className:T,styleType:q="bordered"})=>{const z=r=>e(void 0,void 0,void 0,(function*(){N&&(yield N(r))})),C="bordered"===q;return r(o,{id:y?`${y}-file-download`:"file-download",className:i(p,C&&c,T),"data-testid":w,enabled:C,thickness:m["width-040"],radius:l.sm,colour:d.border,children:[(x||v)&&r("div",{className:a,children:[x?"string"==typeof x?t("p",{className:h,children:x}):t(s,{className:f,baseTextSize:"heading-xs",children:x}):null,v?"string"==typeof v?t("p",{className:u,children:v}):t(s,{className:j,baseTextSize:"body-md",children:v}):null]}),t("ul",{className:n,children:k&&k.length>0&&k.map((e=>t(b,{fileItem:e,onDownload:z,onClick:g},e.id)))})]})};export{y as FileDownload};
 //# sourceMappingURL=file-download.js.map

package/file-download/file-download.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-download.js","sources":["../../src/file-download/file-download.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Markup } from \"../markup\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport * as styles from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\n// @catalog\n/**\n * Displays a list of downloadable files, optionally grouped under a title and description.\n *\n * Use `FileDownload` to present one or more files that users can download individually.\n * Each file item renders as a card with file metadata and a download trigger.\n * @keywords attachment, document, download, file\n */\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <p className={styles.title}>{title}</p>;\n        }\n\n        return (\n            <Markup className={styles.titleContainer} baseTextSize=\"heading-xs\">\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <p className={styles.description}>{description}</p>;\n        }\n\n        return (\n            <Markup\n                className={styles.descriptionContainer}\n                baseTextSize=\"body-md\"\n            >\n                {description}\n            </Markup>\n        );\n    };\n\n    const isBordered = styleType === \"bordered\";\n\n    return (\n        <DashedBorder\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={clsx(\n                styles.container,\n                isBordered && styles.containerBordered,\n                className\n            )}\n            data-testid={testId}\n            enabled={isBordered}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n        >\n            {(title || description) && (\n                <div className={styles.textContainer}>\n                    {renderTitle()}\n                    {renderDescription()}\n                </div>\n            )}\n            <ul className={styles.listWrapper}>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ul>\n        </DashedBorder>\n    );\n};\n"],"names":["FileDownload","id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","isBordered","_jsxs","DashedBorder","clsx","styles.container","styles.containerBordered","enabled","thickness","Border","radius","Radius","colour","Colour","children","styles.textContainer","_jsx","styles.title","Markup","styles.titleContainer","baseTextSize","styles.description","styles.descriptionContainer","styles.listWrapper","length","map","FileListCard","fileItem"],"mappings":"ogCAiBO,MAAMA,EAAe,EACxBC,KACAC,YAASC,MACTA,EAAKC,YACLA,EACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,OAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IAwCME,EAA2B,aAAdJ,EAEnB,OACIK,EAACC,GACGb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWQ,EACPC,EACAJ,GAAcK,EACdV,GACH,cACYD,EACbY,QAASN,EACTO,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQC,EAAe,OAACC,SAAA,EAEtBtB,GAASC,IACPS,SAAKN,UAAWmB,YAnDnBvB,EAIgB,iBAAVA,EACAwB,EAAA,IAAA,CAAGpB,UAAWqB,EAAYH,SAAGtB,IAIpCwB,EAACE,EAAM,CAACtB,UAAWuB,EAAuBC,aAAa,sBAClD5B,IATE,KAeNC,EAIsB,iBAAhBA,EACAuB,EAAA,IAAA,CAAGpB,UAAWyB,EAAkBP,SAAGrB,IAI1CuB,EAACE,EAAM,CACHtB,UAAW0B,EACXF,aAAa,mBAEZ3B,IAZE,QAuCPuB,QAAIpB,UAAW2B,WACVhC,GACGA,EAAUiC,OAAS,GACnBjC,EAAUkC,KAAK1B,GACXiB,EAACU,EAAY,CAETC,SAAU5B,EACVL,WAAYI,GAFPC,EAAKT,UAMf"}
+{"version":3,"file":"file-download.js","sources":["../../src/file-download/file-download.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Markup } from \"../markup\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport * as styles from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\n// @catalog\n/**\n * Displays a list of downloadable files, optionally grouped under a title and description.\n *\n * Use `FileDownload` to present one or more files that users can download individually.\n * Each file item renders as a card with file metadata and a download trigger.\n * @keywords attachment, document, download, file\n */\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    onClick,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <p className={styles.title}>{title}</p>;\n        }\n\n        return (\n            <Markup className={styles.titleContainer} baseTextSize=\"heading-xs\">\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <p className={styles.description}>{description}</p>;\n        }\n\n        return (\n            <Markup\n                className={styles.descriptionContainer}\n                baseTextSize=\"body-md\"\n            >\n                {description}\n            </Markup>\n        );\n    };\n\n    const isBordered = styleType === \"bordered\";\n\n    return (\n        <DashedBorder\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={clsx(\n                styles.container,\n                isBordered && styles.containerBordered,\n                className\n            )}\n            data-testid={testId}\n            enabled={isBordered}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n        >\n            {(title || description) && (\n                <div className={styles.textContainer}>\n                    {renderTitle()}\n                    {renderDescription()}\n                </div>\n            )}\n            <ul className={styles.listWrapper}>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                            onClick={onClick}\n                        />\n                    ))}\n            </ul>\n        </DashedBorder>\n    );\n};\n"],"names":["FileDownload","id","fileItems","title","description","onDownload","onClick","testId","className","styleType","handleDownloadItem","item","__awaiter","isBordered","_jsxs","DashedBorder","clsx","styles.container","styles.containerBordered","enabled","thickness","Border","radius","Radius","colour","Colour","children","styles.textContainer","_jsx","styles.title","Markup","styles.titleContainer","baseTextSize","styles.description","styles.descriptionContainer","styles.listWrapper","length","map","FileListCard","fileItem"],"mappings":"ogCAiBO,MAAMA,EAAe,EACxBC,KACAC,YAASC,MACTA,EAAKC,YACLA,EACAC,aACAC,UACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,OAAA,OAAA,OAAA,GAAA,YACzDP,UACMA,EAAWM,GAEzB,IAwCME,EAA2B,aAAdJ,EAEnB,OACIK,EAACC,GACGd,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCO,UAAWQ,EACPC,EACAJ,GAAcK,EACdV,GACH,cACYD,EACbY,QAASN,EACTO,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQC,EAAe,OAACC,SAAA,EAEtBvB,GAASC,IACPU,SAAKN,UAAWmB,YAnDnBxB,EAIgB,iBAAVA,EACAyB,EAAA,IAAA,CAAGpB,UAAWqB,EAAYH,SAAGvB,IAIpCyB,EAACE,EAAM,CAACtB,UAAWuB,EAAuBC,aAAa,sBAClD7B,IATE,KAeNC,EAIsB,iBAAhBA,EACAwB,EAAA,IAAA,CAAGpB,UAAWyB,EAAkBP,SAAGtB,IAI1CwB,EAACE,EAAM,CACHtB,UAAW0B,EACXF,aAAa,mBAEZ5B,IAZE,QAuCPwB,QAAIpB,UAAW2B,WACVjC,GACGA,EAAUkC,OAAS,GACnBlC,EAAUmC,KAAK1B,GACXiB,EAACU,EAAY,CAETC,SAAU5B,EACVN,WAAYK,EACZJ,QAASA,GAHJK,EAAKV,UAOf"}

package/file-download/file-list-card/file-list-card.d.ts

@@ -1,2 +1,2 @@
 import type { FileListItemProps } from "./types";
-export declare const FileListCard: import("react").MemoExoticComponent<({ fileItem, onDownload }: FileListItemProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const FileListCard: import("react").MemoExoticComponent<({ fileItem, onDownload, onClick }: FileListItemProps) => import("react/jsx-runtime").JSX.Element>;

package/file-download/file-list-card/file-list-card.js

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as r}from"react/jsx-runtime";import{DownloadIcon as a}from"@lifesg/react-icons";import{ExclamationCircleFillIcon as s}from"@lifesg/react-icons/exclamation-circle-fill";import l from"clsx";import{memo as o,useState as m,useRef as n,useEffect as c}from"react";import{Button as d}from"../../button/button.js";import{FileUploadHelper as h}from"../../file-upload/helper.js";import{ImageWithFallback as p}from"../../shared/image-with-fallback/image-with-fallback.js";import"../../theme/theme-provider/index.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"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import{StringHelper as u}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as f}from"../../theme/utils/use-media-query.js";import{item as v,box as g,boxError as j,contentSection as N,contentSectionHasThumbnail as y,actionContainer as w,iconButton as b,thumbnailContainer as x,thumbnail as k,extendedNameSection as S,nameSection as T,fileSizeSection as $,mobileErrorMessage as z,errorIcon as D,itemNameText as q,desktopErrorMessage as C}from"./file-list-card.styles.js";const I=o((({fileItem:o,onDownload:I})=>{const{id:_,name:B,size:F,errorMessage:L,thumbnailImageDataUrl:M,truncateText:R=!0,ready:U=!0}=o,[A,E]=m(!1),[G,H]=m(!1),J=h.formatFileSizeDisplay(F),K=f("sm"),[O,P]=m(),Q=n(null);c((()=>{Q.current&&P(K?V(B):B)}),[B,K]);const V=e=>{if(!R)return e;const i=Q&&Q.current?Q.current.getBoundingClientRect().width:0;return u.truncateTwoLines(e,i,16,1.5)},W=()=>t(r,{children:[i("div",{className:q,ref:Q,children:O}),G&&t("div",{className:C,children:[i(s,{className:D}),L||"Something went wrong"]})]});return i("li",{className:v,"data-testid":_,children:t("div",{className:l(g,G&&j),onClick:()=>e(void 0,void 0,void 0,(function*(){if(U&&!A){E(!0);try{H(!1),yield I(o)}catch(e){H(!0)}finally{E(!1)}}})),children:[(()=>{let e;return e=t(r,M?{children:[i("div",{className:x,"data-testid":`${_}-thumbnail`,children:i(p,{className:k,"data-testid":`${_}-thumbnail-image`,src:M})}),t("div",{className:S,children:[i("div",{className:T,children:W()}),i("div",{className:$,children:J||"-"}),G&&t("div",{className:z,children:[i(s,{className:D}),L||"Something went wrong"]})]})]}:{children:[i("div",{className:T,children:W()}),i("div",{className:$,children:J||"-"}),G&&t("div",{className:z,children:[i(s,{className:D}),L||"Something went wrong"]})]}),i("div",{className:l(N,!!M&&y),children:e})})(),i("div",{className:w,children:i(d,{className:b,"data-testid":`${_}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${B}`,loading:A||!U,icon:i(a,{})})})]})})}));export{I as FileListCard};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as i,Fragment as r}from"react/jsx-runtime";import{DownloadIcon as a}from"@lifesg/react-icons";import{ExclamationCircleFillIcon as l}from"@lifesg/react-icons/exclamation-circle-fill";import o from"clsx";import{memo as s,useState as n,useRef as m,useEffect as c}from"react";import{Button as d}from"../../button/button.js";import{FileUploadHelper as p}from"../../file-upload/helper.js";import{VisuallyHidden as h}from"../../shared/accessibility/index.js";import{ImageWithFallback as u}from"../../shared/image-with-fallback/image-with-fallback.js";import"../../theme/theme-provider/index.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"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import{StringHelper as f}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as y}from"../../theme/utils/use-media-query.js";import{item as b,box as j,boxError as g,extendedNameSection as v,contentSection as N,contentSectionHasThumbnail as k,cardButton as w,actionContainer as x,iconButton as C,thumbnailContainer as T,thumbnail as D,thumbnailPdf as $,nameSection as _,fileSizeSection as z,mobileErrorMessage as I,errorIcon as L,itemNameText as P,desktopErrorMessage as S}from"./file-list-card.styles.js";const q=s((({fileItem:s,onDownload:q,onClick:F})=>{const{id:R,name:U,mimeType:B,size:M,errorMessage:O,thumbnailImageDataUrl:A,truncateText:E=!0,ready:G=!0,clickLabel:H}=s,[J,K]=n(!1),[Q,V]=n(!1),W=p.formatFileSizeDisplay(M),X=p.resolveThumbnailDisplay(B,A),Y="none"!==X.type,Z=y("sm"),[ee,te]=n(),ie=m(null);c((()=>{ie.current&&te(Z?se(U):U)}),[U,Z]);const re=()=>e(void 0,void 0,void 0,(function*(){if(G&&!J){K(!0);try{V(!1),yield q(s)}catch(e){V(!0)}finally{K(!1)}}})),ae=()=>{G&&(F?F(s):re())},le=e=>{e.stopPropagation(),ae()},oe=e=>{e.stopPropagation(),re()},se=e=>{if(!E)return e;const t=ie&&ie.current?ie.current.getBoundingClientRect().width:0;return f.truncateTwoLines(e,t,16,1.5)},ne=()=>{if("none"===X.type)return null;const e="pdf-icon"===X.type;return t("div",{className:T,"data-testid":`${R}-thumbnail`,children:t(u,{className:o(D,e&&$),"data-testid":`${R}-thumbnail-image`,src:e?p.PDF_ICON_URL:X.src})})},me=()=>i(r,{children:[t("div",{className:_,children:i(r,{children:[t("div",{className:P,ref:ie,children:ee}),Q&&i("div",{className:S,children:[t(l,{className:L}),O||"Something went wrong"]})]})}),t("div",{className:z,children:W||"-"}),Q&&i("div",{className:I,children:[t(l,{className:L}),O||"Something went wrong"]})]});return t("li",{className:b,"data-testid":R,children:i("div",{className:o(j,Q&&g),onClick:ae,children:[i("div",{className:o(N,Y&&k),children:[ne(),Y?t("div",{className:v,children:me()}):me()]}),F?t(h,{children:t("button",{type:"button",className:w,"data-testid":`${R}-card-button`,"aria-label":null!=H?H:U,disabled:!G,onClick:le})}):null,t("div",{className:x,children:t(d,{className:C,"data-testid":`${R}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${U}`,loading:J||!G,icon:t(a,{}),onClick:oe})})]})})}));export{q as FileListCard};
 //# sourceMappingURL=file-list-card.js.map

package/file-download/file-list-card/file-list-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.js","sources":["../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport clsx from \"clsx\";\nimport { memo, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { useMaxWidthMediaQuery } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport * as styles from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <div className={styles.itemNameText} ref={containerRef}>\n                {displayText}\n            </div>\n            {isError && (\n                <div className={styles.desktopErrorMessage}>\n                    <ExclamationCircleFillIcon className={styles.errorIcon} />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </div>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailSrc: string) => (\n        <>\n            <div\n                className={styles.thumbnailContainer}\n                data-testid={`${id}-thumbnail`}\n            >\n                <ImageWithFallback\n                    className={styles.thumbnail}\n                    data-testid={`${id}-thumbnail-image`}\n                    src={thumbnailSrc}\n                />\n            </div>\n            <div className={styles.extendedNameSection}>\n                <div className={styles.nameSection}>\n                    {renderNameDescription()}\n                </div>\n                <div className={styles.fileSizeSection}>\n                    {fileSize ? fileSize : \"-\"}\n                </div>\n                {isError && (\n                    <div className={styles.mobileErrorMessage}>\n                        <ExclamationCircleFillIcon\n                            className={styles.errorIcon}\n                        />\n                        {errorMessage ? errorMessage : \"Something went wrong\"}\n                    </div>\n                )}\n            </div>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <div className={styles.nameSection}>{renderNameDescription()}</div>\n            <div className={styles.fileSizeSection}>\n                {fileSize ? fileSize : \"-\"}\n            </div>\n            {isError && (\n                <div className={styles.mobileErrorMessage}>\n                    <ExclamationCircleFillIcon className={styles.errorIcon} />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </div>\n            )}\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (thumbnailImageDataUrl) {\n            content = renderWithThumbnail(thumbnailImageDataUrl);\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.contentSection,\n                    !!thumbnailImageDataUrl && styles.contentSectionHasThumbnail\n                )}\n            >\n                {content}\n            </div>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <div className={styles.actionContainer}>\n                <Button\n                    className={styles.iconButton}\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                    loading={isLoading || !ready}\n                    icon={<DownloadIcon />}\n                />\n            </div>\n        );\n    };\n\n    return (\n        <li className={styles.item} data-testid={id}>\n            <div\n                className={clsx(styles.box, isError && styles.boxError)}\n                onClick={handleDownload}\n            >\n                {renderContents()}\n                {renderActions()}\n            </div>\n        </li>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","isMobile","useMaxWidthMediaQuery","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_Fragment","children","_jsx","className","styles.itemNameText","ref","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.item","clsx","styles.box","styles.boxError","onClick","__awaiter","_a","content","styles.thumbnailContainer","ImageWithFallback","styles.thumbnail","src","styles.extendedNameSection","styles.nameSection","styles.fileSizeSection","styles.mobileErrorMessage","styles.contentSection","styles.contentSectionHasThumbnail","renderContents","styles.actionContainer","Button","styles.iconButton","type","styleType","sizeType","loading","icon","DownloadIcon"],"mappings":"q5CAaA,MAsLaA,EAAeC,GAtLV,EAAGC,WAAUC,iBAI3B,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,EAAIC,MACnBA,GAAQ,GACRR,GAGGS,EAAWC,GAAgBC,GAAkB,IAC7CC,EAASC,GAAcF,GAAkB,GAC1CG,EAAWC,EAAiBC,sBAAsBZ,GAClDa,EAAWC,EAAsB,OAChCC,EAAaC,GAAkBT,IAChCU,EAAeC,EAAuB,MAK5CC,GAAU,KACDF,EAAaG,SAEdJ,EADAH,EACeQ,EAAiBtB,GAEjBA,EACnB,GAED,CAACA,EAAMc,IAKV,MAmBMQ,EAAoBC,IACtB,IAAKnB,EAAc,OAAOmB,EAE1B,MAAMC,EACFN,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQI,wBAAwBC,MAC7C,EAEV,OAAOC,EAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAMlEK,EAAwB,IAC1BC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAAA,MAAA,CAAKC,UAAWC,EAAqBC,IAAKlB,EAAYc,SACjDhB,IAEJP,GACGqB,EAAA,MAAA,CAAKI,UAAWG,EAA0BL,SAAA,CACtCC,EAACK,EAAyB,CAACJ,UAAWK,IACrCrC,GAA8B,6BA0F/C,OACI+B,EAAA,KAAA,CAAIC,UAAWM,EAAW,cAAezC,EAAEiC,SACvCF,SACII,UAAWO,EAAKC,EAAYjC,GAAWkC,GACvCC,QAvIW,IAAWC,OAAA,OAAA,OAAA,GAAA,YAC9B,GAAKxC,IAASC,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLZ,EAAWD,EACrB,CAAE,MAAAiD,GACEpC,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAyHmCyB,SAAA,CA1CZ,MACnB,IAAIe,EAQJ,OALIA,EAjDJjB,EAAAC,EAgDI5B,EAhDJ,CAAA6B,SAAA,CACIC,EAAA,MAAA,CACIC,UAAWc,EAAyB,cACvB,GAAGjD,uBAEhBkC,EAACgB,EAAiB,CACdf,UAAWgB,EAAgB,cACd,GAAGnD,oBAChBoD,IAyCsBhD,MAtC9B2B,EAAA,MAAA,CAAKI,UAAWkB,EAA0BpB,SAAA,CACtCC,EAAA,MAAA,CAAKC,UAAWmB,EAAkBrB,SAC7BH,MAELI,EAAA,MAAA,CAAKC,UAAWoB,EAAsBtB,SACjCrB,GAAsB,MAE1BF,GACGqB,EAAA,MAAA,CAAKI,UAAWqB,EAAyBvB,SAAA,CACrCC,EAACK,EAAyB,CACtBJ,UAAWK,IAEdrC,GAA8B,+BAQ/C,CAAA8B,SAAA,CACIC,EAAA,MAAA,CAAKC,UAAWmB,WAAqBxB,MACrCI,EAAA,MAAA,CAAKC,UAAWoB,EAAsBtB,SACjCrB,GAAsB,MAE1BF,GACGqB,EAAA,MAAA,CAAKI,UAAWqB,EAAyBvB,SAAA,CACrCC,EAACK,EAAyB,CAACJ,UAAWK,IACrCrC,GAA8B,6BAgBvC+B,SACIC,UAAWO,EACPe,IACErD,GAAyBsD,GAC9BzB,SAEAe,GACC,EA2BDW,GArBLzB,EAAA,MAAA,CAAKC,UAAWyB,EAAsB3B,SAClCC,EAAC2B,EAAM,CACH1B,UAAW2B,EAAiB,cACf,GAAG9D,oBAChB+D,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,YAAYhE,IACxBiE,QAAS3D,IAAcD,EACvB6D,KAAMjC,EAACkC,EAAY,CAAA,WAe1B"}
+{"version":3,"file":"file-list-card.js","sources":["../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport clsx from \"clsx\";\nimport { memo, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { useMaxWidthMediaQuery } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport * as styles from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload, onClick }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        mimeType,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n        clickLabel,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const thumbnailDisplay = FileUploadHelper.resolveThumbnailDisplay(\n        mimeType,\n        thumbnailImageDataUrl\n    );\n    const hasThumbnail = thumbnailDisplay.type !== \"none\";\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    const handleCardClick = () => {\n        if (!ready) {\n            return;\n        }\n\n        if (onClick) {\n            onClick(fileItem);\n            return;\n        }\n\n        handleDownload();\n    };\n\n    const handleCardButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        /*\n         * The button sits inside the container, which handles clicks too.\n         * Without this both handlers fire and the action runs twice.\n         */\n        event.stopPropagation();\n        handleCardClick();\n    };\n\n    const handleDownloadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        // Same reason: the container's handler must not also run.\n        event.stopPropagation();\n        handleDownload();\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <div className={styles.itemNameText} ref={containerRef}>\n                {displayText}\n            </div>\n            {isError && (\n                <div className={styles.desktopErrorMessage}>\n                    <ExclamationCircleFillIcon className={styles.errorIcon} />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </div>\n            )}\n        </>\n    );\n\n    const renderThumbnail = () => {\n        if (thumbnailDisplay.type === \"none\") {\n            return null;\n        }\n\n        const isPdfBadge = thumbnailDisplay.type === \"pdf-icon\";\n\n        return (\n            <div\n                className={styles.thumbnailContainer}\n                data-testid={`${id}-thumbnail`}\n            >\n                <ImageWithFallback\n                    className={clsx(\n                        styles.thumbnail,\n                        isPdfBadge && styles.thumbnailPdf\n                    )}\n                    data-testid={`${id}-thumbnail-image`}\n                    src={\n                        isPdfBadge\n                            ? FileUploadHelper.PDF_ICON_URL\n                            : thumbnailDisplay.src\n                    }\n                />\n            </div>\n        );\n    };\n\n    const renderNameSizeError = () => (\n        <>\n            <div className={styles.nameSection}>{renderNameDescription()}</div>\n            <div className={styles.fileSizeSection}>\n                {fileSize ? fileSize : \"-\"}\n            </div>\n            {isError && (\n                <div className={styles.mobileErrorMessage}>\n                    <ExclamationCircleFillIcon className={styles.errorIcon} />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </div>\n            )}\n        </>\n    );\n\n    const renderContents = () => (\n        <div\n            className={clsx(\n                styles.contentSection,\n                hasThumbnail && styles.contentSectionHasThumbnail\n            )}\n        >\n            {renderThumbnail()}\n            {hasThumbnail ? (\n                <div className={styles.extendedNameSection}>\n                    {renderNameSizeError()}\n                </div>\n            ) : (\n                renderNameSizeError()\n            )}\n        </div>\n    );\n\n    const renderCardButton = () => {\n        if (!onClick) {\n            return null;\n        }\n\n        return (\n            <VisuallyHidden>\n                <button\n                    type=\"button\"\n                    className={styles.cardButton}\n                    data-testid={`${id}-card-button`}\n                    aria-label={clickLabel ?? name}\n                    disabled={!ready}\n                    onClick={handleCardButtonClick}\n                />\n            </VisuallyHidden>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <div className={styles.actionContainer}>\n                <Button\n                    className={styles.iconButton}\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                    loading={isLoading || !ready}\n                    icon={<DownloadIcon />}\n                    onClick={handleDownloadButtonClick}\n                />\n            </div>\n        );\n    };\n\n    return (\n        <li className={styles.item} data-testid={id}>\n            <div\n                className={clsx(styles.box, isError && styles.boxError)}\n                onClick={handleCardClick}\n            >\n                {renderContents()}\n                {renderCardButton()}\n                {renderActions()}\n            </div>\n        </li>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","onClick","id","name","mimeType","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","clickLabel","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","thumbnailDisplay","resolveThumbnailDisplay","hasThumbnail","type","isMobile","useMaxWidthMediaQuery","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","handleDownload","__awaiter","_a","handleCardClick","handleCardButtonClick","event","stopPropagation","handleDownloadButtonClick","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderThumbnail","isPdfBadge","_jsx","className","styles.thumbnailContainer","children","ImageWithFallback","clsx","styles.thumbnail","styles.thumbnailPdf","src","PDF_ICON_URL","renderNameSizeError","_jsxs","_Fragment","styles.nameSection","styles.itemNameText","ref","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.fileSizeSection","styles.mobileErrorMessage","styles.item","styles.box","styles.boxError","styles.contentSection","styles.contentSectionHasThumbnail","styles.extendedNameSection","VisuallyHidden","styles.cardButton","disabled","styles.actionContainer","Button","styles.iconButton","styleType","sizeType","loading","icon","DownloadIcon"],"mappings":"4/CAcA,MA4OaA,EAAeC,GA5OV,EAAGC,WAAUC,aAAYC,cAIvC,MAAMC,GACFA,EAAEC,KACFA,EAAIC,SACJA,EAAQC,KACRA,EAAIC,aACJA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,EAAIC,MACnBA,GAAQ,EAAIC,WACZA,GACAX,GAGGY,EAAWC,GAAgBC,GAAkB,IAC7CC,EAASC,GAAcF,GAAkB,GAC1CG,EAAWC,EAAiBC,sBAAsBb,GAClDc,EAAmBF,EAAiBG,wBACtChB,EACAG,GAEEc,EAAyC,SAA1BF,EAAiBG,KAChCC,EAAWC,EAAsB,OAChCC,GAAaC,IAAkBb,IAChCc,GAAeC,EAAuB,MAK5CC,GAAU,KACDF,GAAaG,SAEdJ,GADAH,EACeQ,GAAiB5B,GAEjBA,EACnB,GAED,CAACA,EAAMoB,IAKV,MAAMS,GAAiB,IAAWC,OAAA,OAAA,OAAA,GAAA,YAC9B,GAAKxB,IAASE,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLf,EAAWD,EACrB,CAAE,MAAAmC,GACEnB,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAEMuB,GAAkB,KACf1B,IAIDR,EACAA,EAAQF,GAIZiC,KAAgB,EAGdI,GACFC,IAMAA,EAAMC,kBACNH,IAAiB,EAGfI,GACFF,IAGAA,EAAMC,kBACNN,IAAgB,EAMdD,GAAoBS,IACtB,IAAKhC,EAAc,OAAOgC,EAE1B,MAAMC,EACFd,IAAgBA,GAAaG,QACvBH,GAAaG,QAAQY,wBAAwBC,MAC7C,EAEV,OAAOC,EAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAoBlEK,GAAkB,KACpB,GAA8B,SAA1B3B,EAAiBG,KACjB,OAAO,KAGX,MAAMyB,EAAuC,aAA1B5B,EAAiBG,KAEpC,OACI0B,EAAA,MAAA,CACIC,UAAWC,EAAyB,cACvB,GAAGhD,cAAciD,SAE9BH,EAACI,EAAiB,CACdH,UAAWI,EACPC,EACAP,GAAcQ,GACjB,cACY,GAAGrD,oBAChBsD,IACIT,EACM9B,EAAiBwC,aACjBtC,EAAiBqC,OAG7B,EAIRE,GAAsB,IACxBC,EAAAC,EAAA,CAAAT,SAAA,CACIH,EAAA,MAAA,CAAKC,UAAWY,WA3CpBF,EAAAC,EAAA,CAAAT,SAAA,CACIH,EAAA,MAAA,CAAKC,UAAWa,EAAqBC,IAAKpC,GAAYwB,SACjD1B,KAEJX,GACG6C,EAAA,MAAA,CAAKV,UAAWe,EAA0Bb,SAAA,CACtCH,EAACiB,EAAyB,CAAChB,UAAWiB,IACrC5D,GAA8B,+BAqCvC0C,EAAA,MAAA,CAAKC,UAAWkB,EAAsBhB,SACjCnC,GAAsB,MAE1BF,GACG6C,EAAA,MAAA,CAAKV,UAAWmB,EAAyBjB,SAAA,CACrCH,EAACiB,EAAyB,CAAChB,UAAWiB,IACrC5D,GAA8B,6BA6D/C,OACI0C,EAAA,KAAA,CAAIC,UAAWoB,EAAW,cAAenE,EAAEiD,SACvCQ,EAAA,MAAA,CACIV,UAAWI,EAAKiB,EAAYxD,GAAWyD,GACvCtE,QAASkC,GAAegB,SAAA,CA1DhCQ,EAAA,MAAA,CACIV,UAAWI,EACPmB,EACAnD,GAAgBoD,GACnBtB,SAAA,CAEAL,KACAzB,EACG2B,EAAA,MAAA,CAAKC,UAAWyB,EAA0BvB,SACrCO,OAGLA,QAMHzD,EAKD+C,EAAC2B,EAAc,CAAAxB,SACXH,EAAA,SAAA,CACI1B,KAAK,SACL2B,UAAW2B,EAAiB,cACf,GAAG1E,gBAAgB,aACpBQ,QAAAA,EAAcP,EAC1B0E,UAAWpE,EACXR,QAASmC,OAXV,KAmBPY,EAAA,MAAA,CAAKC,UAAW6B,EAAsB3B,SAClCH,EAAC+B,EAAM,CACH9B,UAAW+B,EAAiB,cACf,GAAG9E,oBAChBoB,KAAK,SACL2D,UAAU,QACVC,SAAS,QAAO,aACJ,YAAY/E,IACxBgF,QAASxE,IAAcF,EACvB2E,KAAMpC,EAACqC,EAAY,CAAA,GACnBpF,QAASsC,WAgBhB"}

package/file-download/file-list-card/file-list-card.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const item: import("@linaria/core").LinariaClassName;
+export declare const cardButton: import("@linaria/core").LinariaClassName;
 export declare const box: import("@linaria/core").LinariaClassName;
 export declare const boxError: import("@linaria/core").LinariaClassName;
 export declare const contentSection: import("@linaria/core").LinariaClassName;
@@ -14,3 +15,4 @@ export declare const actionContainer: import("@linaria/core").LinariaClassName;
 export declare const iconButton: import("@linaria/core").LinariaClassName;
 export declare const thumbnailContainer: import("@linaria/core").LinariaClassName;
 export declare const thumbnail: import("@linaria/core").LinariaClassName;
+export declare const thumbnailPdf: import("@linaria/core").LinariaClassName;

package/file-download/file-list-card/file-list-card.styles.js

@@ -1,2 +1,2 @@
-import"./file-list-card.styles_18j2gut.css";const i="ifkrwze",t="b7grm6i",e="b1ryf4f4",f="casceiz",l="c83cih3",o="n13wqyhg",c="ethi1vt",d="ff8ofzq",r="iytzo9z",s="e4y82lx",a="dga23xt",y="m1qdniby",z="a1xq0zd",g="i18nltf5",n="tmpqdeo",q="t4orgj8";export{z as actionContainer,t as box,e as boxError,f as contentSection,l as contentSectionHasThumbnail,a as desktopErrorMessage,s as errorIcon,c as extendedNameSection,d as fileSizeSection,g as iconButton,i as item,r as itemNameText,y as mobileErrorMessage,o as nameSection,q as thumbnail,n as thumbnailContainer};
+import"./file-list-card.styles_lzbqkk.css";const t="ifkrwze",i="c7grm6i",l="b1ryf4f4",e="basceiz",f="c83cih3",c="c13wqyhg",o="nthi1vt",d="ef8ofzq",r="fytzo9z",s="i4y82lx",z="ega23xt",a="d1qdniby",q="m1xq0zd",y="a18nltf5",k="impqdeo",n="t4orgj8",b="t96jkl",g="t1l7ztkl";export{y as actionContainer,l as box,e as boxError,i as cardButton,f as contentSection,c as contentSectionHasThumbnail,a as desktopErrorMessage,z as errorIcon,d as extendedNameSection,r as fileSizeSection,k as iconButton,t as item,s as itemNameText,q as mobileErrorMessage,o as nameSection,b as thumbnail,n as thumbnailContainer,g as thumbnailPdf};
 //# sourceMappingURL=file-list-card.styles.js.map

package/file-download/file-list-card/file-list-card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.styles.js","sources":["../../../src/file-download/file-list-card/file-list-card.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const item = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const box = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const boxError = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-error\"]};\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const contentSectionHasThumbnail = css`\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        align-items: center;\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const itemNameText = css`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst baseErrorMessage = `\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    ${baseErrorMessage}\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    ${baseErrorMessage}\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnailContainer = css`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnail = css`\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":["item","box","boxError","contentSection","contentSectionHasThumbnail","nameSection","extendedNameSection","fileSizeSection","itemNameText","errorIcon","desktopErrorMessage","mobileErrorMessage","actionContainer","iconButton","thumbnailContainer","thumbnail"],"mappings":"wFAQO,MAAMA,EAAI,UAYJC,EAAG,UAqBHC,EAAQ,WASRC,EAAc,UAYdC,EAA0B,UAO1BC,EAAW,WAYXC,EAAmB,UAYnBC,EAAe,UAqBfC,EAAY,UASZC,EAAS,UAYTC,EAAmB,UAYnBC,EAAkB,WAalBC,EAAe,UAYfC,EAAU,WAQVC,EAAkB,UAclBC,EAAS"}
+{"version":3,"file":"file-list-card.styles.js","sources":["../../../src/file-download/file-list-card/file-list-card.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const item = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const cardButton = css`\n    appearance: none;\n    padding: 0;\n    background: none;\n    border: none;\n`;\n\nexport const box = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n\n    @supports selector(:has(*)) {\n        &:has(.${cardButton}:focus-visible) {\n            outline: 2px solid ${Colour[\"focus-ring\"]};\n            outline-offset: -2px;\n        }\n    }\n`;\n\nexport const boxError = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-error\"]};\n    }\n\n    @supports selector(:has(*)) {\n        &:has(.${cardButton}:focus-visible) {\n            outline-color: ${Colour[\"border-error-focus\"]};\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const contentSectionHasThumbnail = css`\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        align-items: center;\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const itemNameText = css`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst baseErrorMessage = `\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    ${baseErrorMessage}\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    ${baseErrorMessage}\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnailContainer = css`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnail = css`\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const thumbnailPdf = css`\n    border: none;\n`;\n"],"names":["item","cardButton","box","boxError","contentSection","contentSectionHasThumbnail","nameSection","extendedNameSection","fileSizeSection","itemNameText","errorIcon","desktopErrorMessage","mobileErrorMessage","actionContainer","iconButton","thumbnailContainer","thumbnail","thumbnailPdf"],"mappings":"uFAQO,MAAMA,EAAI,UAYJC,EAAU,UAOVC,EAAG,WA6BHC,EAAQ,UAeRC,EAAc,UAYdC,EAA0B,WAO1BC,EAAW,UAYXC,EAAmB,UAYnBC,EAAe,UAqBfC,EAAY,UASZC,EAAS,UAYTC,EAAmB,WAYnBC,EAAkB,UAalBC,EAAe,WAYfC,EAAU,UAQVC,EAAkB,UAclBC,EAAS,SAeTC,EAAY"}

package/file-download/file-list-card/file-list-card.styles_lzbqkk.css

@@ -0,0 +1,18 @@
+@layer fds{.ifkrwze{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%;border:none;}.ifkrwze:not(:last-child){margin-bottom:var(--fds-spacing-16);}
+.c7grm6i{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;padding:0;background:none;border:none;}
+.b1ryf4f4{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:var(--fds-spacing-16) var(--fds-spacing-32);cursor:pointer;background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}:where(body.fds-breakpoint-lg-max) .b1ryf4f4{padding:var(--fds-spacing-16);}.b1ryf4f4:hover{background:var(--fds-colour-bg-hover);}@supports selector(:has(*)){.b1ryf4f4:has(.c7grm6i:focus-visible){outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}}
+.basceiz{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}.basceiz:hover{background:var(--fds-colour-bg-error);}@supports selector(:has(*)){.basceiz:has(.c7grm6i:focus-visible){outline-color:var(--fds-colour-border-error-focus);}}
+.c83cih3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .c83cih3{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
+:where(body.fds-breakpoint-lg-max) .c13wqyhg{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.nthi1vt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;overflow-wrap:break-word;word-break:break-all;white-space:normal;}
+.ef8ofzq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .ef8ofzq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
+.fytzo9z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;width:5rem;margin-left:var(--fds-spacing-8);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .fytzo9z{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;width:100%;margin-left:0;margin-top:var(--fds-spacing-8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+.i4y82lx{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .i4y82lx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+.ega23xt{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.d1qdniby{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-lg-max) .d1qdniby{display:none;visibility:hidden;}
+.m1xq0zd{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-lg-max) .m1xq0zd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
+.a18nltf5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:var(--fds-spacing-32);}:where(body.fds-breakpoint-lg-max) .a18nltf5{margin-left:var(--fds-spacing-16);}
+.impqdeo{min-width:unset;}.impqdeo:not(:last-child){margin-right:var(--fds-spacing-16);}
+.t4orgj8{width:auto;margin-right:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-lg-max) .t4orgj8{margin-right:var(--fds-spacing-16);}
+.t96jkl{border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);width:96px;height:96px;aspect-ratio:1;object-fit:cover;}:where(body.fds-breakpoint-lg-max) .t96jkl{width:64px;height:64px;}
+.t1l7ztkl{border:none;}}

package/file-download/file-list-card/types.d.ts

@@ -2,4 +2,5 @@ import type { FileItemDownloadProps } from "../types";
 export interface FileListItemProps {
     fileItem: FileItemDownloadProps;
     onDownload: (file: FileItemDownloadProps) => void | Promise<void>;
+    onClick?: ((file: FileItemDownloadProps) => void) | undefined;
 }

package/file-download/types.d.ts

@@ -30,6 +30,12 @@ export interface FileItemDownloadProps {
      * @default true
      */
     ready?: boolean | undefined;
+    /**
+     * Name for the card, used when `FileDownload` is given an `onClick`.
+     *
+     * @default the file name
+     */
+    clickLabel?: string | undefined;
 }
 /** Visual style variant controlling whether the component renders with a dashed border. */
 export type FileDownloadStyle = "bordered" | "no-border";
@@ -68,4 +74,11 @@ export interface FileDownloadProps {
      * @returns A `Promise` that resolves when the download is complete, or `void` for synchronous handling.
      */
     onDownload: (file: FileItemDownloadProps) => void | Promise<void>;
+    /**
+     * Called when a file card itself is activated, as opposed to its download button.
+     * When omitted, activating the card triggers `onDownload` instead.
+     *
+     * @param file The file item whose card was activated.
+     */
+    onClick?: ((file: FileItemDownloadProps) => void) | undefined;
 }

package/file-upload/helper.d.ts

@@ -1,6 +1,36 @@
+/**
+ * How a file's thumbnail slot should be rendered.
+ *
+ * - `image` — a thumbnail was supplied; render it at `src`
+ * - `pdf-icon` — a PDF with no thumbnail; render the PDF badge borderless
+ * - `none` — nothing to show; render no thumbnail slot at all
+ */
+export type FileThumbnailDisplay = {
+    type: "image";
+    src: string;
+} | {
+    type: "pdf-icon";
+} | {
+    type: "none";
+};
 export declare class FileUploadHelper {
     static readonly PDF_MIME_TYPE = "application/pdf";
     static readonly PDF_ICON_URL = "https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg";
     static formatFileSizeDisplay(size?: number): string;
     static isSupportedImageType(type: string): boolean;
+    /**
+     * Decides how a file's thumbnail slot should render, given its MIME type
+     * and any thumbnail the consumer supplied.
+     *
+     * Lives on `FileUploadHelper` so `FileUpload` can adopt it later. Today
+     * only `FileDownload` calls it: `FileUpload` still decides this inline in
+     * `file-list-item-thumbnail.tsx`, and the two do NOT yet agree — for a
+     * non-PDF with no thumbnail this returns `"none"` while `FileUpload`
+     * renders an `<img>` with an empty `src`. Do not read this as an invariant
+     * the two components already share.
+     *
+     * Callers render the result with their own markup, because their thumbnails
+     * change size at different breakpoints.
+     */
+    static resolveThumbnailDisplay(mimeType: string | undefined, thumbnailImageDataUrl: string | undefined): FileThumbnailDisplay;
 }

package/file-upload/helper.js

@@ -1,2 +1,2 @@
-class e{static formatFileSizeDisplay(e){if(!e||0===e)return"0 KB";const a=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,a)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][a]}`}static isSupportedImageType(e){return["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e)}}e.PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg";export{e as FileUploadHelper};
+class e{static formatFileSizeDisplay(e){if(!e||0===e)return"0 KB";const t=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,t)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][t]}`}static isSupportedImageType(e){return["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e)}static resolveThumbnailDisplay(t,i){return i?{type:"image",src:i}:t===e.PDF_MIME_TYPE?{type:"pdf-icon"}:{type:"none"}}}e.PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg";export{e as FileUploadHelper};
 //# sourceMappingURL=helper.js.map

package/file-upload/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../src/file-upload/helper.ts"],"sourcesContent":["export class FileUploadHelper {\n    public static readonly PDF_MIME_TYPE = \"application/pdf\";\n    public static readonly PDF_ICON_URL =\n        \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    public static formatFileSizeDisplay(size?: number) {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    }\n\n    public static isSupportedImageType(type: string): boolean {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    }\n}\n"],"names":["FileUploadHelper","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes","PDF_MIME_TYPE","PDF_ICON_URL"],"mappings":"MAAaA,EAMF,4BAAOC,CAAsBC,GAChC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAG9B,CAEO,2BAAOO,CAAqBC,GAW/B,MAT2B,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,EACvC,EA9BuBX,EAAAa,cAAgB,kBAChBb,EAAAc,aACnB"}
+{"version":3,"file":"helper.js","sources":["../../src/file-upload/helper.ts"],"sourcesContent":["/**\n * How a file's thumbnail slot should be rendered.\n *\n * - `image` — a thumbnail was supplied; render it at `src`\n * - `pdf-icon` — a PDF with no thumbnail; render the PDF badge borderless\n * - `none` — nothing to show; render no thumbnail slot at all\n */\nexport type FileThumbnailDisplay =\n    | { type: \"image\"; src: string }\n    | { type: \"pdf-icon\" }\n    | { type: \"none\" };\n\nexport class FileUploadHelper {\n    public static readonly PDF_MIME_TYPE = \"application/pdf\";\n    public static readonly PDF_ICON_URL =\n        \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    public static formatFileSizeDisplay(size?: number) {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    }\n\n    public static isSupportedImageType(type: string): boolean {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    }\n\n    /**\n     * Decides how a file's thumbnail slot should render, given its MIME type\n     * and any thumbnail the consumer supplied.\n     *\n     * Lives on `FileUploadHelper` so `FileUpload` can adopt it later. Today\n     * only `FileDownload` calls it: `FileUpload` still decides this inline in\n     * `file-list-item-thumbnail.tsx`, and the two do NOT yet agree — for a\n     * non-PDF with no thumbnail this returns `\"none\"` while `FileUpload`\n     * renders an `<img>` with an empty `src`. Do not read this as an invariant\n     * the two components already share.\n     *\n     * Callers render the result with their own markup, because their thumbnails\n     * change size at different breakpoints.\n     */\n    public static resolveThumbnailDisplay(\n        mimeType: string | undefined,\n        thumbnailImageDataUrl: string | undefined\n    ): FileThumbnailDisplay {\n        if (thumbnailImageDataUrl) {\n            return { type: \"image\", src: thumbnailImageDataUrl };\n        }\n\n        if (mimeType === FileUploadHelper.PDF_MIME_TYPE) {\n            return { type: \"pdf-icon\" };\n        }\n\n        return { type: \"none\" };\n    }\n}\n"],"names":["FileUploadHelper","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes","resolveThumbnailDisplay","mimeType","thumbnailImageDataUrl","src","PDF_MIME_TYPE","PDF_ICON_URL"],"mappings":"MAYaA,EAMF,4BAAOC,CAAsBC,GAChC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAG9B,CAEO,2BAAOO,CAAqBC,GAW/B,MAT2B,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,EACvC,CAgBO,8BAAOE,CACVC,EACAC,GAEA,OAAIA,EACO,CAAEJ,KAAM,QAASK,IAAKD,GAG7BD,IAAad,EAAiBiB,cACvB,CAAEN,KAAM,YAGZ,CAAEA,KAAM,OACnB,EA3DuBX,EAAAiB,cAAgB,kBAChBjB,EAAAkB,aACnB"}

package/footer/footer-disclaimer-links-data.js

@@ -1,2 +1,2 @@
-const e={privacy:{href:"https://www.life.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.life.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},r={privacy:{href:"https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},t={privacy:{href:"https://www.imda.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.imda.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},o={privacy:{href:"https://mylegacy.life.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://mylegacy.life.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},n={privacy:{href:"https://www.police.gov.sg/Privacy-Statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.police.gov.sg/Terms-of-Use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report-vulnerability",target:"_blank",rel:"noopener",external:!0}},a={privacy:{href:"https://supportgowhere.life.gov.sg/privacy-statement.pdf",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://supportgowhere.life.gov.sg/terms-of-use.pdf",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},s=s=>{switch(s){case"bookingsg":return r;case"imda":return t;case"mylegacy":return o;case"spf":return n;case"supportgowhere":return a;default:return e}};export{s as getDefaultDisclaimerLinks};
+const e={privacy:{href:"https://www.life.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.life.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},r={privacy:{href:"https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},t={privacy:{href:"https://www.imda.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.imda.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},o={privacy:{href:"https://mylegacy.life.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://mylegacy.life.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},n={privacy:{href:"https://www.police.gov.sg/Privacy-Statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.police.gov.sg/Terms-of-Use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report-vulnerability",target:"_blank",rel:"noopener",external:!0}},s={privacy:{href:"https://www.sportsingapore.gov.sg/privacy/",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.sportsingapore.gov.sg/terms-of-use/",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},a={privacy:{href:"https://supportgowhere.life.gov.sg/privacy-statement.pdf",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://supportgowhere.life.gov.sg/terms-of-use.pdf",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},l=l=>{switch(l){case"bookingsg":return r;case"imda":return t;case"mylegacy":return o;case"spf":return n;case"sportsg-orange":return s;case"supportgowhere":return a;default:return e}};export{l as getDefaultDisclaimerLinks};
 //# sourceMappingURL=footer-disclaimer-links-data.js.map

package/footer/footer-disclaimer-links-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer-disclaimer-links-data.js","sources":["../../src/footer/footer-disclaimer-links-data.tsx"],"sourcesContent":["import type { ThemeType } from \"../theme/types\";\nimport type { InternalDisclaimerLinks } from \"./footer-helper\";\n\nconst BaseDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://www.life.gov.sg/privacy-statement\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://www.life.gov.sg/terms-of-use\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst BookingSgDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst IMDADisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://www.imda.gov.sg/privacy-statement\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://www.imda.gov.sg/terms-of-use\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://www.tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst MyLegacyDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://mylegacy.life.gov.sg/privacy-statement\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://mylegacy.life.gov.sg/terms-of-use\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst SPFDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://www.police.gov.sg/Privacy-Statement\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://www.police.gov.sg/Terms-of-Use\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://www.tech.gov.sg/report-vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst SupportGoWhereDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://supportgowhere.life.gov.sg/privacy-statement.pdf\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://supportgowhere.life.gov.sg/terms-of-use.pdf\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://www.tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nexport const getDefaultDisclaimerLinks = (resourceScheme?: ThemeType) => {\n    switch (resourceScheme) {\n        case \"bookingsg\":\n            return BookingSgDisclaimerLinks;\n        case \"imda\":\n            return IMDADisclaimerLinks;\n        case \"mylegacy\":\n            return MyLegacyDisclaimerLinks;\n        case \"spf\":\n            return SPFDisclaimerLinks;\n        case \"supportgowhere\":\n            return SupportGoWhereDisclaimerLinks;\n        default:\n            return BaseDisclaimerLinks;\n    }\n};\n"],"names":["BaseDisclaimerLinks","privacy","href","target","rel","termsOfUse","reportVulnerability","external","BookingSgDisclaimerLinks","IMDADisclaimerLinks","MyLegacyDisclaimerLinks","SPFDisclaimerLinks","SupportGoWhereDisclaimerLinks","getDefaultDisclaimerLinks","resourceScheme"],"mappings":"AAGA,MAAMA,EAA+C,CACjDC,QAAS,CACLC,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,uCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZC,EAAoD,CACtDP,QAAS,CACLC,KAAM,8DACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,4DACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZE,EAA+C,CACjDR,QAAS,CACLC,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,uCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZG,EAAmD,CACrDT,QAAS,CACLC,KAAM,iDACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZI,EAA8C,CAChDV,QAAS,CACLC,KAAM,8CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,yCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZK,EAAyD,CAC3DX,QAAS,CACLC,KAAM,2DACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,sDACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAILM,EAA6BC,IACtC,OAAQA,GACJ,IAAK,YACD,OAAON,EACX,IAAK,OACD,OAAOC,EACX,IAAK,WACD,OAAOC,EACX,IAAK,MACD,OAAOC,EACX,IAAK,iBACD,OAAOC,EACX,QACI,OAAOZ"}
+{"version":3,"file":"footer-disclaimer-links-data.js","sources":["../../src/footer/footer-disclaimer-links-data.tsx"],"sourcesContent":["import type { ThemeType } from \"../theme/types\";\nimport type { InternalDisclaimerLinks } from \"./footer-helper\";\n\nconst BaseDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://www.life.gov.sg/privacy-statement\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://www.life.gov.sg/terms-of-use\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst BookingSgDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst IMDADisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://www.imda.gov.sg/privacy-statement\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://www.imda.gov.sg/terms-of-use\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://www.tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst MyLegacyDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://mylegacy.life.gov.sg/privacy-statement\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://mylegacy.life.gov.sg/terms-of-use\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst SPFDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://www.police.gov.sg/Privacy-Statement\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://www.police.gov.sg/Terms-of-Use\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://www.tech.gov.sg/report-vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst SportSGOrangeWhereDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://www.sportsingapore.gov.sg/privacy/\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://www.sportsingapore.gov.sg/terms-of-use/\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://www.tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nconst SupportGoWhereDisclaimerLinks: InternalDisclaimerLinks = {\n    privacy: {\n        href: \"https://supportgowhere.life.gov.sg/privacy-statement.pdf\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    termsOfUse: {\n        href: \"https://supportgowhere.life.gov.sg/terms-of-use.pdf\",\n        target: \"_blank\",\n        rel: \"noopener\",\n    },\n    reportVulnerability: {\n        href: \"https://www.tech.gov.sg/report_vulnerability\",\n        target: \"_blank\",\n        rel: \"noopener\",\n        external: true,\n    },\n};\n\nexport const getDefaultDisclaimerLinks = (resourceScheme?: ThemeType) => {\n    switch (resourceScheme) {\n        case \"bookingsg\":\n            return BookingSgDisclaimerLinks;\n        case \"imda\":\n            return IMDADisclaimerLinks;\n        case \"mylegacy\":\n            return MyLegacyDisclaimerLinks;\n        case \"spf\":\n            return SPFDisclaimerLinks;\n        case \"sportsg-orange\":\n            return SportSGOrangeWhereDisclaimerLinks;\n        case \"supportgowhere\":\n            return SupportGoWhereDisclaimerLinks;\n        default:\n            return BaseDisclaimerLinks;\n    }\n};\n"],"names":["BaseDisclaimerLinks","privacy","href","target","rel","termsOfUse","reportVulnerability","external","BookingSgDisclaimerLinks","IMDADisclaimerLinks","MyLegacyDisclaimerLinks","SPFDisclaimerLinks","SportSGOrangeWhereDisclaimerLinks","SupportGoWhereDisclaimerLinks","getDefaultDisclaimerLinks","resourceScheme"],"mappings":"AAGA,MAAMA,EAA+C,CACjDC,QAAS,CACLC,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,uCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZC,EAAoD,CACtDP,QAAS,CACLC,KAAM,8DACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,4DACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZE,EAA+C,CACjDR,QAAS,CACLC,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,uCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZG,EAAmD,CACrDT,QAAS,CACLC,KAAM,iDACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZI,EAA8C,CAChDV,QAAS,CACLC,KAAM,8CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,yCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZK,EAA6D,CAC/DX,QAAS,CACLC,KAAM,6CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,kDACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZM,EAAyD,CAC3DZ,QAAS,CACLC,KAAM,2DACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,sDACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAILO,EAA6BC,IACtC,OAAQA,GACJ,IAAK,YACD,OAAOP,EACX,IAAK,OACD,OAAOC,EACX,IAAK,WACD,OAAOC,EACX,IAAK,MACD,OAAOC,EACX,IAAK,iBACD,OAAOC,EACX,IAAK,iBACD,OAAOC,EACX,QACI,OAAOb"}

package/footer/footer.styles.js

@@ -1,2 +1,2 @@
-import"./footer.styles_1msorhc.css";const l="b1ozupxm",s="f1b3ng0m",o="f1f7a2pi",t="t1nab4kr",e="l1t4stq",b="l14ev7f9",g={lifesg:"l1rsy8ww",bookingsg:"bsv4pll",mylegacy:"m1m4savg",ccube:"c6zlk1a",supportgowhere:"sdqdit1"},r="l1guit5j",c="l1dnmj9w",m="a1r2lyba",p="b1ni5lnl",a="bakpusz",n="cb1d27e",f="cntgl6w",i="d2vgmpj";export{m as addonSection,l as baseFooter,p as bottomSection,a as bottomSectionContent,n as copyrightSection,f as copyrightText,i as disclaimerTextLink,s as footerLink,o as fullWidthDivider,c as linkSection,r as linkSectionWrapper,b as logoImage,e as logoSection,g as logoSize,t as topSection};
+import"./footer.styles_14hnlcq.css";const l="b1ozupxm",s="f1b3ng0m",t="f1f7a2pi",o="t1nab4kr",e="l1t4stq",b="l14ev7f9",g={bookingsg:"b1rsy8ww",ccube:"csv4pll",lifesg:"l1m4savg",mylegacy:"m6zlk1a",supportgowhere:"sdqdit1"},c="l1guit5j",n="l1dnmj9w",p="a1r2lyba",r="b1ni5lnl",a="bakpusz",m="cb1d27e",f="cntgl6w",i="d2vgmpj";export{p as addonSection,l as baseFooter,r as bottomSection,a as bottomSectionContent,m as copyrightSection,f as copyrightText,i as disclaimerTextLink,s as footerLink,t as fullWidthDivider,n as linkSection,c as linkSectionWrapper,b as logoImage,e as logoSection,g as logoSize,o as topSection};
 //# sourceMappingURL=footer.styles.js.map

package/footer/footer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.styles.js","sources":["../../src/footer/footer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { ComponentToken, MediaQuery, Spacing } from \"../theme\";\nimport type { ThemeType } from \"../theme/types\";\n\n// =============================================================================\n// GENERIC\n// =============================================================================\n\nexport const baseFooter = css`\n    background: ${ComponentToken.Footer[\"colour-bg\"]};\n`;\n\nexport const footerLink = css`\n    color: ${ComponentToken.Footer[\"link-colour-text\"]};\n\n    &:hover {\n        color: ${ComponentToken.Footer[\"link-colour-text-hover\"]};\n    }\n`;\n\n// =============================================================================\n// TOP SECTION\n// =============================================================================\n\nexport const fullWidthDivider = css`\n    width: 100%;\n`;\n\nexport const topSection = css`\n    padding: ${Spacing[\"spacing-64\"]} 0;\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-32\"]} 0;\n\n        [data-id=\"container\"] {\n            flex-direction: column;\n            gap: ${Spacing[\"spacing-32\"]};\n        }\n    }\n`;\n\nexport const logoSection = css`\n    display: flex;\n    width: fit-content;\n    margin-right: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        margin-right: 0;\n    }\n`;\n\nexport const logoImage = css`\n    max-height: 4rem;\n    max-width: 100%;\n    object-fit: contain;\n`;\n\nexport const logoSize: Partial<Record<ThemeType, string>> = {\n    lifesg: css`\n        width: 4rem;\n    `,\n    bookingsg: css`\n        width: 4rem;\n    `,\n    mylegacy: css`\n        width: 10rem;\n        max-height: 2rem;\n    `,\n    ccube: css`\n        width: 10rem;\n    `,\n    supportgowhere: css`\n        width: 10rem;\n    `,\n};\n\nexport const linkSectionWrapper = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-32\"]};\n    flex: 1 1 auto;\n    max-width: calc(32% + ${Spacing[\"spacing-32\"]});\n\n    ${MediaQuery.MaxWidth.lg} {\n        max-width: 100%;\n    }\n`;\n\nexport const linkSection = css`\n    flex: 1 1 50%;\n    list-style-type: none;\n\n    &:nth-of-type(2) {\n        // 2nd col\n        grid-column: 7 / span 4;\n    }\n\n    li {\n        &:not(:last-child) {\n            margin-bottom: ${Spacing[\"spacing-8\"]};\n        }\n\n        a {\n            display: inline-block;\n        }\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        // first col\n        grid-column: 1 / span 6;\n\n        &:nth-of-type(2) {\n            // 2nd col\n            grid-column: 7 / span 6;\n        }\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        // first col\n        grid-column: 1 / span 4;\n\n        &:nth-of-type(2) {\n            // 2nd col\n            grid-column: 5 / span 4;\n        }\n    }\n`;\n\nexport const addonSection = css`\n    flex: 0 1 33%;\n    margin-left: auto;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex: 1 1 100%;\n        margin-left: 0;\n    }\n`;\n\n// =============================================================================\n// BOTTOM SECTION\n// =============================================================================\n\nexport const bottomSection = css`\n    padding: ${Spacing[\"spacing-20\"]} 0;\n\n    [data-id=\"container\"] {\n        column-gap: ${Spacing[\"spacing-32\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        border-top: none;\n        padding: ${Spacing[\"spacing-16\"]} 0;\n\n        [data-id=\"container\"] {\n            flex-direction: column;\n        }\n    }\n`;\n\nexport const bottomSectionContent = css`\n    flex: 1 1 50%;\n    display: flex;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        gap: ${Spacing[\"spacing-8\"]};\n        &:not(:last-child) {\n            margin-right: 0;\n        }\n    }\n`;\n\nexport const copyrightSection = css`\n    justify-content: flex-end;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-top: ${Spacing[\"spacing-16\"]};\n        justify-content: flex-start;\n    }\n`;\n\nexport const copyrightText = css`\n    color: ${ComponentToken.Footer[\"colour-text\"]};\n`;\n\nexport const disclaimerTextLink = css`\n    color: ${ComponentToken.Footer[\"disclaimer-link-colour-text\"]};\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        color: ${ComponentToken.Footer[\"disclaimer-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &:not(:last-child) {\n            margin-right: 0;\n        }\n    }\n`;\n"],"names":["baseFooter","footerLink","fullWidthDivider","topSection","logoSection","logoImage","logoSize","lifesg","bookingsg","mylegacy","ccube","supportgowhere","linkSectionWrapper","linkSection","addonSection","bottomSection","bottomSectionContent","copyrightSection","copyrightText","disclaimerTextLink"],"mappings":"0DASO,MAAMA,EAAU,WAIVC,EAAU,WAYVC,EAAgB,WAIhBC,EAAU,WAaVC,EAAW,UAWXC,EAAS,WAMTC,EAA+C,CACxDC,OAAM,WAGNC,UAAS,UAGTC,SAAQ,WAIRC,MAAK,UAGLC,eAAc,WAKLC,EAAkB,WAWlBC,EAAW,WAwCXC,EAAY,WAcZC,EAAa,WAiBbC,EAAoB,UAapBC,EAAgB,UAShBC,EAAa,UAIbC,EAAkB"}
+{"version":3,"file":"footer.styles.js","sources":["../../src/footer/footer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { ComponentToken, MediaQuery, Spacing } from \"../theme\";\nimport type { ThemeType } from \"../theme/types\";\n\n// =============================================================================\n// GENERIC\n// =============================================================================\n\nexport const baseFooter = css`\n    background: ${ComponentToken.Footer[\"colour-bg\"]};\n`;\n\nexport const footerLink = css`\n    color: ${ComponentToken.Footer[\"link-colour-text\"]};\n\n    &:hover {\n        color: ${ComponentToken.Footer[\"link-colour-text-hover\"]};\n    }\n`;\n\n// =============================================================================\n// TOP SECTION\n// =============================================================================\n\nexport const fullWidthDivider = css`\n    width: 100%;\n`;\n\nexport const topSection = css`\n    padding: ${Spacing[\"spacing-64\"]} 0;\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-32\"]} 0;\n\n        [data-id=\"container\"] {\n            flex-direction: column;\n            gap: ${Spacing[\"spacing-32\"]};\n        }\n    }\n`;\n\nexport const logoSection = css`\n    display: flex;\n    width: fit-content;\n    margin-right: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        margin-right: 0;\n    }\n`;\n\nexport const logoImage = css`\n    max-height: 4rem;\n    max-width: 100%;\n    object-fit: contain;\n`;\n\nexport const logoSize: Partial<Record<ThemeType, string>> = {\n    bookingsg: css`\n        width: 4rem;\n    `,\n    ccube: css`\n        width: 10rem;\n    `,\n    lifesg: css`\n        width: 4rem;\n    `,\n    mylegacy: css`\n        width: 10rem;\n        max-height: 2rem;\n    `,\n    supportgowhere: css`\n        width: 10rem;\n    `,\n};\n\nexport const linkSectionWrapper = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-32\"]};\n    flex: 1 1 auto;\n    max-width: calc(32% + ${Spacing[\"spacing-32\"]});\n\n    ${MediaQuery.MaxWidth.lg} {\n        max-width: 100%;\n    }\n`;\n\nexport const linkSection = css`\n    flex: 1 1 50%;\n    list-style-type: none;\n\n    &:nth-of-type(2) {\n        // 2nd col\n        grid-column: 7 / span 4;\n    }\n\n    li {\n        &:not(:last-child) {\n            margin-bottom: ${Spacing[\"spacing-8\"]};\n        }\n\n        a {\n            display: inline-block;\n        }\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        // first col\n        grid-column: 1 / span 6;\n\n        &:nth-of-type(2) {\n            // 2nd col\n            grid-column: 7 / span 6;\n        }\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        // first col\n        grid-column: 1 / span 4;\n\n        &:nth-of-type(2) {\n            // 2nd col\n            grid-column: 5 / span 4;\n        }\n    }\n`;\n\nexport const addonSection = css`\n    flex: 0 1 33%;\n    margin-left: auto;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex: 1 1 100%;\n        margin-left: 0;\n    }\n`;\n\n// =============================================================================\n// BOTTOM SECTION\n// =============================================================================\n\nexport const bottomSection = css`\n    padding: ${Spacing[\"spacing-20\"]} 0;\n\n    [data-id=\"container\"] {\n        column-gap: ${Spacing[\"spacing-32\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        border-top: none;\n        padding: ${Spacing[\"spacing-16\"]} 0;\n\n        [data-id=\"container\"] {\n            flex-direction: column;\n        }\n    }\n`;\n\nexport const bottomSectionContent = css`\n    flex: 1 1 50%;\n    display: flex;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        gap: ${Spacing[\"spacing-8\"]};\n        &:not(:last-child) {\n            margin-right: 0;\n        }\n    }\n`;\n\nexport const copyrightSection = css`\n    justify-content: flex-end;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-top: ${Spacing[\"spacing-16\"]};\n        justify-content: flex-start;\n    }\n`;\n\nexport const copyrightText = css`\n    color: ${ComponentToken.Footer[\"colour-text\"]};\n`;\n\nexport const disclaimerTextLink = css`\n    color: ${ComponentToken.Footer[\"disclaimer-link-colour-text\"]};\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        color: ${ComponentToken.Footer[\"disclaimer-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &:not(:last-child) {\n            margin-right: 0;\n        }\n    }\n`;\n"],"names":["baseFooter","footerLink","fullWidthDivider","topSection","logoSection","logoImage","logoSize","bookingsg","ccube","lifesg","mylegacy","supportgowhere","linkSectionWrapper","linkSection","addonSection","bottomSection","bottomSectionContent","copyrightSection","copyrightText","disclaimerTextLink"],"mappings":"0DASO,MAAMA,EAAU,WAIVC,EAAU,WAYVC,EAAgB,WAIhBC,EAAU,WAaVC,EAAW,UAWXC,EAAS,WAMTC,EAA+C,CACxDC,UAAS,WAGTC,MAAK,UAGLC,OAAM,WAGNC,SAAQ,UAIRC,eAAc,WAKLC,EAAkB,WAWlBC,EAAW,WAwCXC,EAAY,WAcZC,EAAa,WAiBbC,EAAoB,UAapBC,EAAgB,UAShBC,EAAa,UAIbC,EAAkB"}

package/{cjs/footer/footer.styles_1msorhc.css → footer/footer.styles_14hnlcq.css}

@@ -4,10 +4,10 @@
 .t1nab4kr{padding:var(--fds-spacing-64) 0;}:where(body.fds-breakpoint-lg-max) .t1nab4kr{padding:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-lg-max) .t1nab4kr [data-id="container"]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-32);}
 .l1t4stq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-right:var(--fds-spacing-64);}:where(body.fds-breakpoint-lg-max) .l1t4stq{width:100%;margin-right:0;}
 .l14ev7f9{max-height:4rem;max-width:100%;object-fit:contain;}
-.l1rsy8ww{width:4rem;}
-.bsv4pll{width:4rem;}
-.m1m4savg{width:10rem;max-height:2rem;}
-.c6zlk1a{width:10rem;}
+.b1rsy8ww{width:4rem;}
+.csv4pll{width:10rem;}
+.l1m4savg{width:4rem;}
+.m6zlk1a{width:10rem;max-height:2rem;}
 .sdqdit1{width:10rem;}
 .l1guit5j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-32);-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;max-width:calc(32% + var(--fds-spacing-32));}:where(body.fds-breakpoint-lg-max) .l1guit5j{max-width:100%;}
 .l1dnmj9w{-webkit-flex:1 1 50%;-ms-flex:1 1 50%;flex:1 1 50%;list-style-type:none;}.l1dnmj9w:nth-of-type(2){-ms-grid-column:7;-ms-grid-column-span:4;grid-column:7/span 4;}.l1dnmj9w li:not(:last-child){margin-bottom:var(--fds-spacing-8);}.l1dnmj9w li a{display:inline-block;}:where(body.fds-breakpoint-lg-max) .l1dnmj9w{-ms-grid-column:1;-ms-grid-column-span:6;grid-column:1/span 6;}:where(body.fds-breakpoint-lg-max) .l1dnmj9w:nth-of-type(2){-ms-grid-column:7;-ms-grid-column-span:6;grid-column:7/span 6;}:where(body.fds-breakpoint-md-max) .l1dnmj9w{-ms-grid-column:1;-ms-grid-column-span:4;grid-column:1/span 4;}:where(body.fds-breakpoint-md-max) .l1dnmj9w:nth-of-type(2){-ms-grid-column:5;-ms-grid-column-span:4;grid-column:5/span 4;}

package/fullscreen-image-carousel/fullscreen-image-carousel.d.ts

@@ -1,5 +1,5 @@
 import type { FullscreenImageCarouselProps, FullscreenImageCarouselRef } from "./types";
-export declare const Component: ({ items, initialActiveItemIndex, hideThumbnail, hideNavigation, hideCounter, hideMagnifier, onDelete, onClose, insets, show, ...otherProps }: FullscreenImageCarouselProps, ref: React.Ref<FullscreenImageCarouselRef>) => import("react/jsx-runtime").JSX.Element;
+export declare const Component: ({ items, initialActiveItemIndex, hideThumbnail, hideNavigation, hideCounter, hideMagnifier, customActions, onDelete, onClose, insets, topBarRef, show, ...otherProps }: FullscreenImageCarouselProps, ref: React.Ref<FullscreenImageCarouselRef>) => import("react/jsx-runtime").JSX.Element;
 /**
  * A fullscreen modal carousel for browsing images and custom media items.
  *