@lifesg/react-design-system 3.5.0-canary.8 → 3.6.0-canary.1

package/codemods/run-codemod.ts

@@ -1,5 +1,5 @@
 import { checkbox, confirm, input, select } from "@inquirer/prompts";
-import { execSync } from "child_process";
+import { execFileSync } from "child_process";
 import * as fs from "fs";
 import * as path from "path";
 import { Theme } from "./common";
@@ -68,18 +68,26 @@ function runCodemods(selection: UserSelection): void {
 
     selectedCodemods.forEach((codemod) => {
         const codemodPath = path.join(codemodsDir, codemod, "index.ts");
-        let command = `npx --yes jscodeshift --parser=tsx -t ${codemodPath} ${targetPath}`;
+        const args = [
+            "--yes",
+            "jscodeshift",
+            "--parser=tsx",
+            "-t",
+            codemodPath,
+        ];
 
         if (codemod === Codemod.MigrateColour && selectedTheme) {
-            command = `npx --yes jscodeshift --parser=tsx -t ${codemodPath} --mapping=${selectedTheme} ${targetPath}`;
+            args.push(`--mapping=${selectedTheme}`);
         }
 
+        args.push(targetPath);
+
         console.log(
             `Running codemod: ${codemod} on target path: ${targetPath}`
         );
 
         try {
-            execSync(command, { stdio: "inherit" });
+            execFileSync("npx", args, { stdio: "inherit" });
             console.log(
                 `Codemod ${codemod} executed successfully on ${targetPath}`
             );

package/drawer/drawer.d.ts

@@ -1,2 +1,2 @@
 import { DrawerProps } from "./types";
-export declare const Drawer: ({ children, heading, show, onClose, onOverlayClick, ...otherProps }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: ({ children, heading, show, onClose, onOverlayClick, customCallToAction, ...otherProps }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/drawer/drawer.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useFloating as o,useDismiss as t,useInteractions as a,useTransitionStatus as l,FloatingFocusManager as n}from"@floating-ui/react";import{CrossIcon as s}from"@lifesg/react-icons/cross";import{useState as c,useRef as d,useEffect as p}from"react";import{Overlay as m}from"../overlay/overlay.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as u}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Container as h,Header as f,Heading as g,Content as v,CloseButton as y}from"./drawer.styles.js";const j=j=>{var{children:C,heading:b,show:w,onClose:k,onOverlayClick:O}=j,x=r(j,["children","heading","show","onClose","onOverlayClick"]);const[F,P]=c(w),T=u(),_=d(null),{context:A,refs:E}=o({open:w,onOpenChange:r=>{!r&&k&&k()}}),H=t(A,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:I}=a([H]),{isMounted:K,status:M}=l(A,{duration:800});p((()=>{if(!w){const r=setTimeout((()=>P(!1)),800);return()=>clearTimeout(r)}P(!0)}),[w]);return e(m,{show:F,enableOverlayClick:!0,onOverlayClick:O,children:K?e(n,{context:A,initialFocus:-1,returnFocus:!0,children:i(h,Object.assign({ref:E.setFloating,$show:w,"data-status":M,"data-testid":"drawer",onClick:r=>{r.stopPropagation()},"aria-modal":!0,role:"dialog","aria-labelledby":T,onTransitionEnd:r=>{var e;"visibility"===r.propertyName&&w&&(null===(e=_.current)||void 0===e||e.focus())}},I(),x,{children:[e(f,{children:e(g,{id:T,ref:_,tabIndex:-1,weight:"bold",forwardedAs:"h2",children:b})}),e(v,{children:C}),e(y,{"aria-label":"Close drawer",onClick:k,focusHighlight:!1,children:e(s,{"aria-hidden":!0})})]}))}):void 0})};export{j as Drawer};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useFloating as o,useDismiss as i,useInteractions as l,useTransitionStatus as a,FloatingFocusManager as s}from"@floating-ui/react";import{CrossIcon as n}from"@lifesg/react-icons/cross";import{useState as d,useContext as c,useRef as m,useEffect as p}from"react";import{useResizeDetector as h}from"../external/react-resize-detector/build/index.esm.js";import{ThemeContext as u}from"styled-components";import{Overlay as f}from"../overlay/overlay.js";import{Breakpoint as g}from"../theme/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as v}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Container as y,Header as j,Heading as C,CallToAction as b,Content as w,CloseButton as x}from"./drawer.styles.js";const k=k=>{var{children:O,heading:T,show:F,onClose:A,onOverlayClick:P,customCallToAction:$}=k,z=e(k,["children","heading","show","onClose","onOverlayClick","customCallToAction"]);const[H,M]=d(F),[R,_]=d(),E=v(),I=c(u),K=g["sm-max"]({theme:I}),N=m(null),{width:Y,ref:q}=h({refreshMode:"throttle",refreshRate:300,onResize:()=>{const e=N.current;e&&_(e.offsetTop+e.offsetHeight/2)}}),B=void 0!==Y&&Y<=K,{context:D,refs:G}=o({open:F,onOpenChange:e=>{!e&&A&&A()}}),J=i(D,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:L}=l([J]),{isMounted:Q,status:S}=a(D,{duration:800});p((()=>{if(!F){const e=setTimeout((()=>M(!1)),800);return()=>clearTimeout(e)}M(!0)}),[F]);return r(f,{show:H,enableOverlayClick:!0,onOverlayClick:P,children:Q?r(s,{context:D,initialFocus:-1,returnFocus:!0,children:t(y,Object.assign({ref:G.setFloating,$show:F,"data-status":S,"data-testid":"drawer",onClick:e=>{e.stopPropagation()},"aria-modal":!0,role:"dialog","aria-labelledby":E,onTransitionEnd:e=>{var r;"visibility"===e.propertyName&&F&&(null===(r=N.current)||void 0===r||r.focus())}},L(),z,{children:[t(j,{ref:q,$stacked:!!$&&B,children:[r(C,{id:E,ref:N,tabIndex:-1,weight:"bold",forwardedAs:"h2",children:T}),$?r(b,{$stacked:B,children:$}):null]}),r(w,{children:O}),r(x,{"aria-label":"Close drawer",onClick:A,focusHighlight:!1,style:void 0!==R?{top:R,transform:"translateY(-50%)"}:void 0,children:r(n,{"aria-hidden":!0})})]}))}):void 0})};export{k as Drawer};
 //# sourceMappingURL=drawer.js.map

package/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Overlay } from \"../overlay\";\nimport { useId } from \"../util\";\nimport {\n    CloseButton,\n    Container,\n    Content,\n    Header,\n    Heading,\n} from \"./drawer.styles\";\nimport { DrawerProps } from \"./types\";\n\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    const id = useId();\n    const initialFocusRef = useRef<HTMLHeadingElement>(null);\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        outsidePress: false, // defer to Overlay click\n    });\n\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 800,\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!show) {\n            const timer = setTimeout(() => setShowOverlay(false), 800);\n            return () => clearTimeout(timer);\n        } else {\n            setShowOverlay(true);\n        }\n    }, [show]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDialogVisibility = (e: React.TransitionEvent) => {\n        if (e.propertyName === \"visibility\" && show) {\n            // focus the first element so that the screenreader enters the dialog\n            initialFocusRef.current?.focus();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={onOverlayClick}\n        >\n            {isMounted ? (\n                <FloatingFocusManager\n                    context={context}\n                    initialFocus={-1}\n                    returnFocus={true}\n                >\n                    <Container\n                        ref={refs.setFloating}\n                        $show={show}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        onClick={handleClick}\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <Header>\n                            <Heading\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                                forwardedAs=\"h2\"\n                            >\n                                {heading}\n                            </Heading>\n                        </Header>\n                        <Content>{children}</Content>\n                        <CloseButton\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                        >\n                            <CrossIcon aria-hidden />\n                        </CloseButton>\n                    </Container>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["Drawer","_a","children","heading","show","onClose","onOverlayClick","otherProps","__rest","showOverlay","setShowOverlay","useState","id","useId","initialFocusRef","useRef","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","Container","Object","assign","ref","setFloating","$show","onClick","event","stopPropagation","role","onTransitionEnd","e","propertyName","current","focus","Header","Heading","tabIndex","weight","forwardedAs","Content","CloseButton","focusHighlight","CrossIcon","undefined"],"mappings":"otBAoBO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,GAAcL,EACXM,EAAUC,EAAAP,EANM,0DAWnB,MAAOQ,EAAaC,GAAkBC,EAASP,GACzCQ,EAAKC,IACLC,EAAkBC,EAA2B,OAK7CC,QAAEA,EAAOC,KAAEA,GAASC,EAAY,CAClCC,KAAMf,EACNgB,aAAeD,KACNA,GAAQd,GACTA,GACJ,IAIFgB,EAAUC,EAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,EAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAoBb,EAAS,CACvDc,SAAU,MAMdC,GAAU,KACN,IAAK3B,EAAM,CACP,MAAM4B,EAAQC,YAAW,IAAMvB,GAAe,IAAQ,KACtD,MAAO,IAAMwB,aAAaF,EAC9B,CACItB,GAAe,EACnB,GACD,CAACN,IAmBJ,OACI+B,EAACC,EAAO,CACJhC,KAAMK,EACN4B,oBAAkB,EAClB/B,eAAgBA,EAAcJ,SAE7ByB,EACGQ,EAACG,EAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAItC,SAEjBuC,EAACC,EAASC,OAAAC,OAAA,CACNC,IAAK5B,EAAK6B,YAAWC,MACd3C,EAAI,cACEwB,EAAM,cACP,SACZoB,QAxBCC,IACjBA,EAAMC,iBAAiB,EAuBa,cAAA,EAEpBC,KAAK,SAAQ,kBACIvC,EACjBwC,gBAnCYC,UACL,eAAnBA,EAAEC,cAAiClD,IAEZ,QAAvBH,EAAAa,EAAgByC,eAAO,IAAAtD,GAAAA,EAAEuD,QAC7B,GAgCoB/B,IACAlB,EAAU,CAAAL,SAAA,CAEdiC,EAACsB,EAAM,CAAAvD,SACHiC,EAACuB,EAAO,CACJ9C,GAAIA,EACJiC,IAAK/B,EACL6C,UAAU,EACVC,OAAO,OACPC,YAAY,KAAI3D,SAEfC,MAGTgC,EAAC2B,EAAO,CAAA5D,SAAEA,IACViC,EAAC4B,EAAW,CAAA,aACG,eACXf,QAAS3C,EACT2D,gBAAgB,EAAK9D,SAErBiC,EAAC8B,EAAS,CAAA,eAAA,iBAItBC,GACE"}
+{"version":3,"file":"drawer.js","sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { Overlay } from \"../overlay\";\nimport { Breakpoint } from \"../theme\";\nimport { useId } from \"../util\";\nimport {\n    CallToAction,\n    CloseButton,\n    Container,\n    Content,\n    Header,\n    Heading,\n} from \"./drawer.styles\";\nimport { DrawerProps } from \"./types\";\n\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    customCallToAction,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    // Vertical centre of the heading, used to align the (last-in-DOM,\n    // absolutely positioned) close button with it. A custom call-to-action can\n    // make the header taller than the heading, so a fixed offset would leave\n    // the close button misaligned.\n    const [closeButtonTop, setCloseButtonTop] = useState<number>();\n    const id = useId();\n    const theme = useContext(ThemeContext);\n    const stackWidth = Breakpoint[\"sm-max\"]({ theme });\n    const initialFocusRef = useRef<HTMLHeadingElement>(null);\n    // Observe the header (whose size tracks the drawer's actual width, which\n    // consumers may override) to drive layout in one pass: the width decides\n    // call-to-action stacking, and each resize re-centres the close button on\n    // the heading. offsetTop/offsetHeight are relative to the drawer (the\n    // positioned ancestor), so they share the close button's coordinate space.\n    const { width: headerWidth, ref: headerRef } =\n        useResizeDetector<HTMLDivElement>({\n            refreshMode: \"throttle\",\n            refreshRate: 300,\n            onResize: () => {\n                const headingEl = initialFocusRef.current;\n                if (headingEl) {\n                    setCloseButtonTop(\n                        headingEl.offsetTop + headingEl.offsetHeight / 2\n                    );\n                }\n            },\n        });\n    const stackCallToAction =\n        headerWidth !== undefined && headerWidth <= stackWidth;\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        outsidePress: false, // defer to Overlay click\n    });\n\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 800,\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!show) {\n            const timer = setTimeout(() => setShowOverlay(false), 800);\n            return () => clearTimeout(timer);\n        } else {\n            setShowOverlay(true);\n        }\n    }, [show]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDialogVisibility = (e: React.TransitionEvent) => {\n        if (e.propertyName === \"visibility\" && show) {\n            // focus the first element so that the screenreader enters the dialog\n            initialFocusRef.current?.focus();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={onOverlayClick}\n        >\n            {isMounted ? (\n                <FloatingFocusManager\n                    context={context}\n                    initialFocus={-1}\n                    returnFocus={true}\n                >\n                    <Container\n                        ref={refs.setFloating}\n                        $show={show}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        onClick={handleClick}\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <Header\n                            ref={headerRef}\n                            $stacked={!!customCallToAction && stackCallToAction}\n                        >\n                            <Heading\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                                forwardedAs=\"h2\"\n                            >\n                                {heading}\n                            </Heading>\n                            {customCallToAction ? (\n                                <CallToAction $stacked={stackCallToAction}>\n                                    {customCallToAction}\n                                </CallToAction>\n                            ) : null}\n                        </Header>\n                        <Content>{children}</Content>\n                        {/* Rendered last so assistive tech reaches the heading\n                            and content before the close button; centred against\n                            the heading via its measured position. */}\n                        <CloseButton\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                            style={\n                                closeButtonTop !== undefined\n                                    ? {\n                                          top: closeButtonTop,\n                                          transform: \"translateY(-50%)\",\n                                      }\n                                    : undefined\n                            }\n                        >\n                            <CrossIcon aria-hidden />\n                        </CloseButton>\n                    </Container>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["Drawer","_a","children","heading","show","onClose","onOverlayClick","customCallToAction","otherProps","__rest","showOverlay","setShowOverlay","useState","closeButtonTop","setCloseButtonTop","id","useId","theme","useContext","ThemeContext","stackWidth","Breakpoint","initialFocusRef","useRef","width","headerWidth","ref","headerRef","useResizeDetector","refreshMode","refreshRate","onResize","headingEl","current","offsetTop","offsetHeight","stackCallToAction","undefined","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","Container","Object","assign","setFloating","$show","onClick","event","stopPropagation","role","onTransitionEnd","e","propertyName","focus","Header","$stacked","Heading","tabIndex","weight","forwardedAs","CallToAction","Content","CloseButton","focusHighlight","style","top","transform","CrossIcon"],"mappings":"+6BAwBO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,mBACdA,GAAkBN,EACfO,EAAUC,EAAAR,EAPM,+EAYnB,MAAOS,EAAaC,GAAkBC,EAASR,IAKxCS,EAAgBC,GAAqBF,IACtCG,EAAKC,IACLC,EAAQC,EAAWC,GACnBC,EAAaC,EAAW,UAAU,CAAEJ,UACpCK,EAAkBC,EAA2B,OAM3CC,MAAOC,EAAaC,IAAKC,GAC7BC,EAAkC,CAC9BC,YAAa,WACbC,YAAa,IACbC,SAAU,KACN,MAAMC,EAAYV,EAAgBW,QAC9BD,GACAlB,EACIkB,EAAUE,UAAYF,EAAUG,aAAe,EAEvD,IAGNC,OACcC,IAAhBZ,GAA6BA,GAAeL,GAK1CkB,QAAEA,EAAOC,KAAEA,GAASC,EAAY,CAClCC,KAAMrC,EACNsC,aAAeD,KACNA,GAAQpC,GACTA,GACJ,IAIFsC,EAAUC,EAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,EAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAoBb,EAAS,CACvDc,SAAU,MAMdC,GAAU,KACN,IAAKjD,EAAM,CACP,MAAMkD,EAAQC,YAAW,IAAM5C,GAAe,IAAQ,KACtD,MAAO,IAAM6C,aAAaF,EAC9B,CACI3C,GAAe,EACnB,GACD,CAACP,IAmBJ,OACIqD,EAACC,EAAO,CACJtD,KAAMM,EACNiD,sBACArD,eAAgBA,EAAcJ,SAE7B+C,EACGQ,EAACG,EAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAI5D,SAEjB6D,EAACC,EAASC,OAAAC,OAAA,CACNxC,IAAKa,EAAK4B,YAAWC,MACdhE,EAAI,cACE8C,gBACD,SACZmB,QAxBCC,IACjBA,EAAMC,iBAAiB,EAuBa,cAAA,EAEpBC,KAAK,2BACYzD,EACjB0D,gBAnCYC,UACL,eAAnBA,EAAEC,cAAiCvE,IAEZ,QAAvBH,EAAAqB,EAAgBW,eAAO,IAAAhC,GAAAA,EAAE2E,QAC7B,GAgCoB7B,IACAvC,EAAU,CAAAN,SAAA,CAEd6D,EAACc,EAAM,CACHnD,IAAKC,EAASmD,WACFvE,GAAsB6B,YAElCqB,EAACsB,EAAO,CACJhE,GAAIA,EACJW,IAAKJ,EACL0D,UAAU,EACVC,OAAO,OACPC,YAAY,KAAIhF,SAEfC,IAEJI,EACGkD,EAAC0B,EAAY,CAAAL,SAAW1C,EAAiBlC,SACpCK,IAEL,QAERkD,EAAC2B,YAASlF,IAIVuD,EAAC4B,EAAW,CAAA,aACG,eACXhB,QAAShE,EACTiF,gBAAgB,EAChBC,WACuBlD,IAAnBxB,EACM,CACI2E,IAAK3E,EACL4E,UAAW,yBAEfpD,EAASnC,SAGnBuD,EAACiC,mCAIbrD,GACE"}

package/drawer/drawer.styles.d.ts

@@ -1,8 +1,15 @@
 interface StyleProps {
     $show?: boolean | undefined;
 }
+interface HeaderStyleProps {
+    $stacked?: boolean | undefined;
+}
+interface CallToActionStyleProps {
+    $stacked?: boolean | undefined;
+}
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$show"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$show"> & StyleProps, never>>> & string;
-export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stacked"> & HeaderStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stacked"> & HeaderStyleProps, never>>> & string;
+export declare const CallToAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stacked"> & CallToActionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stacked"> & CallToActionStyleProps, never>>> & string;
 export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const Heading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
     ref?: import("react").RefObject<HTMLHeadingElement> | undefined;

package/drawer/drawer.styles.js

@@ -1,4 +1,4 @@
-import i,{css as t}from"styled-components";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{Motion as a,Colour as e,Shadow as n,Radius as d,MediaQuery as r,Spacing as s,Font as l,Border as p}from"../theme/index.js";import{Typography as c}from"../typography/typography.js";const g=t`
+import i,{css as t}from"styled-components";import{ClickableIcon as e}from"../shared/clickable-icon/clickable-icon.js";import{Motion as o,Colour as a,Shadow as n,Radius as d,MediaQuery as s,Spacing as r,Font as l,Border as c}from"../theme/index.js";import{Typography as h}from"../typography/typography.js";const p=t`
     transition-property: right, visibility;
 
     &[data-status="initial"] {
@@ -7,19 +7,19 @@ import i,{css as t}from"styled-components";import{ClickableIcon as o}from"../sha
     }
 
     &[data-status="open"] {
-        transition-duration: ${a["duration-800"]};
-        transition-timing-function: ${a["ease-entrance"]};
+        transition-duration: ${o["duration-800"]};
+        transition-timing-function: ${o["ease-entrance"]};
         right: 0;
         visibility: visible;
     }
 
     &[data-status="close"] {
-        transition-duration: ${a["duration-800"]};
-        transition-timing-function: ${a["ease-exit"]};
+        transition-duration: ${o["duration-800"]};
+        transition-timing-function: ${o["ease-exit"]};
         right: -100%;
         visibility: hidden;
     }
-`,h=i.div`
+`,g=i.div`
     position: fixed;
     top: 0;
 
@@ -27,22 +27,22 @@ import i,{css as t}from"styled-components";import{ClickableIcon as o}from"../sha
     flex-direction: column;
     height: 100%;
 
-    background-color: ${e.bg};
+    background-color: ${a.bg};
     box-shadow: ${n["lg-subtle"]};
 
-    ${g}
+    ${p}
 
     width: 40%;
     border-top-left-radius: ${d.md};
     border-bottom-left-radius: ${d.md};
     overflow: hidden;
 
-    ${r.MaxWidth.xl} {
+    ${s.MaxWidth.xl} {
         width: 50%;
         min-width: 700px;
     }
 
-    ${r.MaxWidth.lg} {
+    ${s.MaxWidth.lg} {
         width: 100%;
         min-width: unset;
         border-top-left-radius: 0;
@@ -52,40 +52,57 @@ import i,{css as t}from"styled-components";import{ClickableIcon as o}from"../sha
     top: 0;
     display: flex;
     align-items: center;
-    gap: ${s["spacing-16"]};
-    padding: ${s["spacing-32"]} ${s["spacing-16"]}
-        ${s["spacing-16"]}
-        calc(${l.Spec["heading-lh-md"]} + ${s["spacing-32"]});
-    background-color: ${e.bg};
-    border-bottom: ${p["width-010"]} ${p.solid} ${e.border};
+    gap: ${r["spacing-16"]};
+    padding: ${r["spacing-32"]} ${r["spacing-16"]}
+        ${r["spacing-16"]}
+        calc(${l.Spec["heading-lh-md"]} + ${r["spacing-32"]});
+    background-color: ${a.bg};
+    border-bottom: ${c["width-010"]} ${c.solid} ${a.border};
 
-    ${r.MaxWidth.lg} {
-        gap: ${s["spacing-8"]};
-        padding: ${s["spacing-32"]} ${s["spacing-20"]}
-            ${s["spacing-16"]}
-            calc(${l.Spec["heading-lh-md"]} + ${s["spacing-24"]});
+    ${i=>i.$stacked&&t`
+            /* Stack the call-to-action below the heading when the drawer is too
+               narrow to fit both on one line. */
+            flex-direction: column;
+            align-items: stretch;
+            gap: ${r["spacing-16"]};
+        `}
+
+    ${s.MaxWidth.lg} {
+        padding: ${r["spacing-32"]} ${r["spacing-20"]}
+            ${r["spacing-16"]}
+            calc(${l.Spec["heading-lh-md"]} + ${r["spacing-24"]});
     }
-`,m=i(o)`
-    color: ${e.icon};
+`,f=i.div`
+    display: flex;
+    /* Flush right, beside the heading. */
+    margin-left: auto;
+
+    ${i=>i.$stacked&&t`
+            /* When stacked, flush left so the buttons line up with the heading
+               (the header's left padding already clears the close icon). */
+            margin-left: 0;
+        `}
+`,m=i(e)`
+    color: ${a.icon};
     padding: 0;
     position: absolute;
-    top: ${s["spacing-32"]};
-    left: ${s["spacing-16"]};
+    top: ${r["spacing-32"]};
+    left: ${r["spacing-16"]};
     &:active,
     &:focus {
-        color: ${e["icon-hover"]};
+        color: ${a["icon-hover"]};
     }
 
     svg {
         height: ${l.Spec["heading-lh-md"]};
         width: ${l.Spec["heading-lh-md"]};
     }
-`,b=i(c.HeadingMD)`
+`,b=i(h.HeadingMD)`
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-`,f=i.div`
+`,u=i.div`
     flex: 1;
     overflow-y: auto;
-`;export{m as CloseButton,h as Container,f as Content,$ as Header,b as Heading};
+`;export{f as CallToAction,m as CloseButton,g as Container,u as Content,$ as Header,b as Heading};
 //# sourceMappingURL=drawer.styles.js.map

package/drawer/drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.js","sources":["../../src/drawer/drawer.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $show?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\n// FloatingUI transition styles\nconst FLOATING_TRANSITION_STYLES = css`\n    transition-property: right, visibility;\n\n    &[data-status=\"initial\"] {\n        right: -100%;\n        visibility: hidden;\n    }\n\n    &[data-status=\"open\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-entrance\"]};\n        right: 0;\n        visibility: visible;\n    }\n\n    &[data-status=\"close\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-exit\"]};\n        right: -100%;\n        visibility: hidden;\n    }\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div<StyleProps>`\n    position: fixed;\n    top: 0;\n\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"lg-subtle\"]};\n\n    ${FLOATING_TRANSITION_STYLES}\n\n    width: 40%;\n    border-top-left-radius: ${Radius[\"md\"]};\n    border-bottom-left-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.xl} {\n        width: 50%;\n        min-width: 700px;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        min-width: unset;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n`;\n\nexport const Header = styled.div`\n    top: 0;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-16\"]}\n        calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-32\"]});\n    background-color: ${Colour.bg};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n\n    ${MediaQuery.MaxWidth.lg} {\n        gap: ${Spacing[\"spacing-8\"]};\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]}\n            ${Spacing[\"spacing-16\"]}\n            calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-24\"]});\n    }\n`;\n\nexport const CloseButton = styled(ClickableIcon)`\n    color: ${Colour.icon};\n    padding: 0;\n    position: absolute;\n    top: ${Spacing[\"spacing-32\"]};\n    left: ${Spacing[\"spacing-16\"]};\n    &:active,\n    &:focus {\n        color: ${Colour[\"icon-hover\"]};\n    }\n\n    svg {\n        height: ${Font.Spec[\"heading-lh-md\"]};\n        width: ${Font.Spec[\"heading-lh-md\"]};\n    }\n`;\n\nexport const Heading = styled(Typography.HeadingMD)`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n\nexport const Content = styled.div`\n    flex: 1;\n    overflow-y: auto;\n`;\n"],"names":["FLOATING_TRANSITION_STYLES","css","Motion","Container","styled","div","Colour","bg","Shadow","Radius","MediaQuery","MaxWidth","xl","lg","Header","Spacing","Font","Spec","Border","solid","border","CloseButton","ClickableIcon","icon","Heading","Typography","HeadingMD","Content"],"mappings":"iTA0BA,MAAMA,EAA6BC,CAAG;;;;;;;;;+BASPC,EAAO;sCACAA,EAAO;;;;;;+BAMdA,EAAO;sCACAA,EAAO;;;;EAShCC,EAAYC,EAAOC,GAAe;;;;;;;;wBAQvBC,EAAOC;kBACbC,EAAO;;MAEnBR;;;8BAGwBS,EAAW;iCACRA,EAAW;;;MAGtCC,EAAWC,SAASC;;;;;MAKpBF,EAAWC,SAASE;;;;;;EAQbC,EAASV,EAAOC,GAAG;;;;WAIrBU,EAAQ;eACJA,EAAQ,iBAAiBA,EAAQ;UACtCA,EAAQ;eACHC,EAAKC,KAAK,sBAAsBF,EAAQ;wBAC/BT,EAAOC;qBACVW,EAAO,gBAAgBA,EAAOC,SAASb,EAAOc;;MAE7DV,EAAWC,SAASE;eACXE,EAAQ;mBACJA,EAAQ,iBAAiBA,EAAQ;cACtCA,EAAQ;mBACHC,EAAKC,KAAK,sBAAsBF,EAAQ;;EAI9CM,EAAcjB,EAAOkB,EAAc;aACnChB,EAAOiB;;;WAGTR,EAAQ;YACPA,EAAQ;;;iBAGHT,EAAO;;;;kBAINU,EAAKC,KAAK;iBACXD,EAAKC,KAAK;;EAIdO,EAAUpB,EAAOqB,EAAWC,UAAU;;;;EAMtCC,EAAUvB,EAAOC,GAAG;;;"}
+{"version":3,"file":"drawer.styles.js","sources":["../../src/drawer/drawer.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $show?: boolean | undefined;\n}\n\ninterface HeaderStyleProps {\n    $stacked?: boolean | undefined;\n}\n\ninterface CallToActionStyleProps {\n    $stacked?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\n// FloatingUI transition styles\nconst FLOATING_TRANSITION_STYLES = css`\n    transition-property: right, visibility;\n\n    &[data-status=\"initial\"] {\n        right: -100%;\n        visibility: hidden;\n    }\n\n    &[data-status=\"open\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-entrance\"]};\n        right: 0;\n        visibility: visible;\n    }\n\n    &[data-status=\"close\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-exit\"]};\n        right: -100%;\n        visibility: hidden;\n    }\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div<StyleProps>`\n    position: fixed;\n    top: 0;\n\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"lg-subtle\"]};\n\n    ${FLOATING_TRANSITION_STYLES}\n\n    width: 40%;\n    border-top-left-radius: ${Radius[\"md\"]};\n    border-bottom-left-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.xl} {\n        width: 50%;\n        min-width: 700px;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        min-width: unset;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n`;\n\nexport const Header = styled.div<HeaderStyleProps>`\n    top: 0;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-16\"]}\n        calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-32\"]});\n    background-color: ${Colour.bg};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n\n    ${(props) =>\n        props.$stacked &&\n        css`\n            /* Stack the call-to-action below the heading when the drawer is too\n               narrow to fit both on one line. */\n            flex-direction: column;\n            align-items: stretch;\n            gap: ${Spacing[\"spacing-16\"]};\n        `}\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]}\n            ${Spacing[\"spacing-16\"]}\n            calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-24\"]});\n    }\n`;\n\nexport const CallToAction = styled.div<CallToActionStyleProps>`\n    display: flex;\n    /* Flush right, beside the heading. */\n    margin-left: auto;\n\n    ${(props) =>\n        props.$stacked &&\n        css`\n            /* When stacked, flush left so the buttons line up with the heading\n               (the header's left padding already clears the close icon). */\n            margin-left: 0;\n        `}\n`;\n\nexport const CloseButton = styled(ClickableIcon)`\n    color: ${Colour.icon};\n    padding: 0;\n    position: absolute;\n    top: ${Spacing[\"spacing-32\"]};\n    left: ${Spacing[\"spacing-16\"]};\n    &:active,\n    &:focus {\n        color: ${Colour[\"icon-hover\"]};\n    }\n\n    svg {\n        height: ${Font.Spec[\"heading-lh-md\"]};\n        width: ${Font.Spec[\"heading-lh-md\"]};\n    }\n`;\n\nexport const Heading = styled(Typography.HeadingMD)`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n\nexport const Content = styled.div`\n    flex: 1;\n    overflow-y: auto;\n`;\n"],"names":["FLOATING_TRANSITION_STYLES","css","Motion","Container","styled","div","Colour","bg","Shadow","Radius","MediaQuery","MaxWidth","xl","lg","Header","Spacing","Font","Spec","Border","solid","border","props","$stacked","CallToAction","CloseButton","ClickableIcon","icon","Heading","Typography","HeadingMD","Content"],"mappings":"iTAkCA,MAAMA,EAA6BC,CAAG;;;;;;;;;+BASPC,EAAO;sCACAA,EAAO;;;;;;+BAMdA,EAAO;sCACAA,EAAO;;;;EAShCC,EAAYC,EAAOC,GAAe;;;;;;;;wBAQvBC,EAAOC;kBACbC,EAAO;;MAEnBR;;;8BAGwBS,EAAW;iCACRA,EAAW;;;MAGtCC,EAAWC,SAASC;;;;;MAKpBF,EAAWC,SAASE;;;;;;EAQbC,EAASV,EAAOC,GAAqB;;;;WAIvCU,EAAQ;eACJA,EAAQ,iBAAiBA,EAAQ;UACtCA,EAAQ;eACHC,EAAKC,KAAK,sBAAsBF,EAAQ;wBAC/BT,EAAOC;qBACVW,EAAO,gBAAgBA,EAAOC,SAASb,EAAOc;;MAE5DC,GACCA,EAAMC,UACNrB,CAAG;;;;;mBAKQc,EAAQ;;;MAGrBL,EAAWC,SAASE;mBACPE,EAAQ,iBAAiBA,EAAQ;cACtCA,EAAQ;mBACHC,EAAKC,KAAK,sBAAsBF,EAAQ;;EAI9CQ,EAAenB,EAAOC,GAA2B;;;;;MAKvDgB,GACCA,EAAMC,UACNrB,CAAG;;;;;EAOEuB,EAAcpB,EAAOqB,EAAc;aACnCnB,EAAOoB;;;WAGTX,EAAQ;YACPA,EAAQ;;;iBAGHT,EAAO;;;;kBAINU,EAAKC,KAAK;iBACXD,EAAKC,KAAK;;EAIdU,EAAUvB,EAAOwB,EAAWC,UAAU;;;;EAMtCC,EAAU1B,EAAOC,GAAG;;;"}

package/drawer/types.d.ts

@@ -11,4 +11,11 @@ export interface DrawerProps {
     onClose?: (() => void) | undefined;
     /** Called when the overlay is clicked */
     onOverlayClick?: (() => void) | undefined;
+    /**
+     * Optional element rendered in the header, e.g. a link or button.
+     *
+     * Sits beside the title on wider drawers, and wraps onto its own line
+     * below the title once the drawer is narrow.
+     */
+    customCallToAction?: React.ReactNode | undefined;
 }

package/external/@govtechsg/sgds-web-component/base/sgds-element.js

@@ -0,0 +1,2 @@
+import{__decorate as e}from"../../../../_virtual/_tslib.js";import"../../../@lit/reactive-element/reactive-element.js";import"../../../lit-html/lit-html.js";import{LitElement as t}from"../../../lit-element/lit-element.js";import s from"./sgds-element2.js";import{property as o}from"../../../@lit/reactive-element/decorators/property.js";class r extends t{emit(e,t){const s=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(s),s}static define(e,t=this,s={}){if(customElements.get(e));else try{customElements.define(e,t,s)}catch(o){customElements.define(e,class extends t{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach((([e,t])=>{this.constructor.define(e,t)}))}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach((e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))})))}}r.styles=[s],r.dependencies={},e([o({type:Boolean,reflect:!0})],r.prototype,"ssr",void 0);export{r as default};
+//# sourceMappingURL=sgds-element.js.map

package/external/@govtechsg/sgds-web-component/base/sgds-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-element.js","sources":["../../../../../node_modules/@govtechsg/sgds-web-component/base/sgds-element.js"],"sourcesContent":["import { __decorate } from 'tslib';\nimport { LitElement, isServer } from 'lit';\nimport css_248z from './sgds-element2.js';\nimport { property } from 'lit/decorators.js';\n\nclass SgdsElement extends LitElement {\n    /** Emits a custom event with more convenient defaults. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    emit(name, options) {\n        const event = new CustomEvent(name, Object.assign({ bubbles: true, cancelable: false, composed: true, detail: {} }, options));\n        this.dispatchEvent(event);\n        return event;\n    }\n    static define(name, elementConstructor = this, options = {}) {\n        const currentlyRegisteredConstructor = customElements.get(name);\n        if (!currentlyRegisteredConstructor) {\n            // We try to register as the actual class first. If for some reason that fails, we fall back to anonymous classes.\n            // customElements can only have 1 class of the same \"object id\" per registry, so that is why the try {} catch {} exists.\n            // Some tools like Jest Snapshots and if you import the constructor and call `new SgdsButton()` they will fail with\n            //   the anonymous class version.\n            try {\n                customElements.define(name, elementConstructor, options);\n            }\n            catch (_err) {\n                customElements.define(name, class extends elementConstructor {\n                }, options);\n            }\n            return;\n        }\n    }\n    constructor() {\n        super();\n        /**@internal Set to true in SSR environment */\n        this.ssr = isServer || Boolean(this.shadowRoot);\n        Object.entries(this.constructor.dependencies).forEach(([name, component]) => {\n            this.constructor.define(name, component);\n        });\n    }\n    firstUpdated(changedProperties) {\n        var _a;\n        super.firstUpdated(changedProperties);\n        // This is a fix to workaround SSR not being able to catch slotchange events.\n        // https://github.com/lit/lit/discussions/4697\n        if (this.ssr) {\n            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(\"slot\").forEach(slotElement => {\n                slotElement.dispatchEvent(new Event(\"slotchange\", { bubbles: true, composed: false, cancelable: false }));\n            });\n        }\n    }\n}\nSgdsElement.styles = [css_248z];\n/** @internal */\nSgdsElement.dependencies = {};\n__decorate([\n    property({ type: Boolean, reflect: true })\n], SgdsElement.prototype, \"ssr\", void 0);\n\nexport { SgdsElement as default };\n//# sourceMappingURL=sgds-element.js.map\n"],"names":["SgdsElement","LitElement","emit","name","options","event","CustomEvent","Object","assign","bubbles","cancelable","composed","detail","this","dispatchEvent","define","elementConstructor","customElements","get","_err","constructor","super","ssr","Boolean","shadowRoot","entries","dependencies","forEach","component","firstUpdated","changedProperties","_a","querySelectorAll","slotElement","Event","styles","css_248z","__decorate","property","type","reflect","prototype"],"mappings":"iVAKA,MAAMA,UAAoBC,EAGtB,IAAAC,CAAKC,EAAMC,GACP,MAAMC,EAAQ,IAAIC,YAAYH,EAAMI,OAAOC,OAAO,CAAEC,SAAS,EAAMC,YAAY,EAAOC,UAAU,EAAMC,OAAQ,CAAA,GAAMR,IAEpH,OADAS,KAAKC,cAAcT,GACZA,CACX,CACA,aAAOU,CAAOZ,EAAMa,EAAqBH,KAAMT,EAAU,CAAA,GAErD,GADuCa,eAAeC,IAAIf,SAMtD,IACIc,eAAeF,OAAOZ,EAAMa,EAAoBZ,EACpD,CACA,MAAOe,GACHF,eAAeF,OAAOZ,EAAM,cAAca,IACvCZ,EACP,CAGR,CACA,WAAAgB,GACIC,QAEAR,KAAKS,IAAkBC,QAAQV,KAAKW,YACpCjB,OAAOkB,QAAQZ,KAAKO,YAAYM,cAAcC,SAAQ,EAAExB,EAAMyB,MAC1Df,KAAKO,YAAYL,OAAOZ,EAAMyB,EAAU,GAEhD,CACA,YAAAC,CAAaC,GACT,IAAIC,EACJV,MAAMQ,aAAaC,GAGfjB,KAAKS,MACsB,QAA1BS,EAAKlB,KAAKW,kBAA+B,IAAPO,GAAyBA,EAAGC,iBAAiB,QAAQL,SAAQM,IAC5FA,EAAYnB,cAAc,IAAIoB,MAAM,aAAc,CAAEzB,SAAS,EAAME,UAAU,EAAOD,YAAY,IAAS,IAGrH,EAEJV,EAAYmC,OAAS,CAACC,GAEtBpC,EAAY0B,aAAe,CAAA,EAC3BW,EAAW,CACPC,EAAS,CAAEC,KAAMhB,QAASiB,SAAS,KACpCxC,EAAYyC,UAAW,WAAO","x_google_ignoreList":[0]}

package/external/@govtechsg/sgds-web-component/base/sgds-element2.js

@@ -0,0 +1,2 @@
+import"../../../@lit/reactive-element/reactive-element.js";import"../../../lit-html/lit-html.js";import"../../../lit-element/lit-element.js";import{css as e}from"../../../@lit/reactive-element/css-tag.js";var t=e`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default,#1a1a1a);display:block;font-family:var(--sgds-font-family-brand,"Inter",system-ui,sans-serif);font-size:var(--sgds-font-size-body-md,1rem);font-weight:var(--sgds-font-weight-regular,400);line-height:var(--sgds-line-height-xs,24px);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;export{t as default};
+//# sourceMappingURL=sgds-element2.js.map

package/external/@govtechsg/sgds-web-component/base/sgds-element2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-element2.js","sources":["../../../../../node_modules/@govtechsg/sgds-web-component/base/sgds-element2.js"],"sourcesContent":["import { css } from 'lit';\n\nvar css_248z = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default,#1a1a1a);display:block;font-family:var(--sgds-font-family-brand,\"Inter\",system-ui,sans-serif);font-size:var(--sgds-font-size-body-md,1rem);font-weight:var(--sgds-font-weight-regular,400);line-height:var(--sgds-line-height-xs,24px);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:\"/\";display:inline-block;height:1em;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;\n\nexport { css_248z as default };\n//# sourceMappingURL=sgds-element2.js.map\n"],"names":["css_248z","css"],"mappings":"6MAEG,IAACA,EAAWC,CAAG","x_google_ignoreList":[0]}

package/external/@govtechsg/sgds-web-component/components/Masthead/index.js

@@ -0,0 +1,2 @@
+import{SgdsMasthead as s}from"./sgds-masthead.js";import{register as m}from"../../utils/ce-registry.js";m("sgds-masthead",s);
+//# sourceMappingURL=index.js.map

package/external/@govtechsg/sgds-web-component/components/Masthead/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../node_modules/@govtechsg/sgds-web-component/components/Masthead/index.js"],"sourcesContent":["import { SgdsMasthead } from './sgds-masthead.js';\nimport { register } from '../../utils/ce-registry.js';\n\nregister(\"sgds-masthead\", SgdsMasthead);\n//# sourceMappingURL=index.js.map\n"],"names":["register","SgdsMasthead"],"mappings":"wGAGAA,EAAS,gBAAiBC","x_google_ignoreList":[0]}

package/external/@govtechsg/sgds-web-component/components/Masthead/masthead.js

@@ -0,0 +1,2 @@
+import"../../../../@lit/reactive-element/reactive-element.js";import"../../../../lit-html/lit-html.js";import"../../../../lit-element/lit-element.js";import{css as t}from"../../../../@lit/reactive-element/css-tag.js";var e=t`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm,1rem)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-sm,1rem)!important}a:hover{color:#0022b9}.sgds-masthead{color-scheme:var(--sgds-color-scheme,only light);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f7f7f7,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem);width:100%}:host([fluid]) .container{max-width:none}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(#f7f7f7,#1a1a1a)}.sgds-masthead .sgds-masthead-content{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;padding-bottom:0;padding-top:0;transition:grid-template-rows .3s cubic-bezier(.25,0,.25,1),opacity .3s cubic-bezier(.25,0,.25,1),padding .3s cubic-bezier(.25,0,.25,1)}.sgds-masthead .sgds-masthead-content.show{grid-template-rows:1fr;opacity:1;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content>.content-grid{min-height:0}.content-grid{display:grid;gap:1rem;grid-template-columns:1fr}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{outline:4px solid #60aaf4}@media screen and (min-width:768px){.content-grid{gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media screen and (min-width:1024px){.container{padding:.25rem var(--sgds-mainnav-padding-x,2rem)}}`;export{e as default};
+//# sourceMappingURL=masthead.js.map

package/external/@govtechsg/sgds-web-component/components/Masthead/masthead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masthead.js","sources":["../../../../../../node_modules/@govtechsg/sgds-web-component/components/Masthead/masthead.js"],"sourcesContent":["import { css } from 'lit';\n\nvar css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm,1rem)!important;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E\")!important;mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E\")!important;width:var(--sgds-icon-size-sm,1rem)!important}a:hover{color:#0022b9}.sgds-masthead{color-scheme:var(--sgds-color-scheme,only light);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f7f7f7,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem);width:100%}:host([fluid]) .container{max-width:none}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(#f7f7f7,#1a1a1a)}.sgds-masthead .sgds-masthead-content{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;padding-bottom:0;padding-top:0;transition:grid-template-rows .3s cubic-bezier(.25,0,.25,1),opacity .3s cubic-bezier(.25,0,.25,1),padding .3s cubic-bezier(.25,0,.25,1)}.sgds-masthead .sgds-masthead-content.show{grid-template-rows:1fr;opacity:1;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content>.content-grid{min-height:0}.content-grid{display:grid;gap:1rem;grid-template-columns:1fr}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{outline:4px solid #60aaf4}@media screen and (min-width:768px){.content-grid{gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media screen and (min-width:1024px){.container{padding:.25rem var(--sgds-mainnav-padding-x,2rem)}}`;\n\nexport { css_248z as default };\n//# sourceMappingURL=masthead.js.map\n"],"names":["css_248z","css"],"mappings":"yNAEG,IAACA,EAAWC,CAAG","x_google_ignoreList":[0]}

package/external/@govtechsg/sgds-web-component/components/Masthead/sgds-masthead.js

@@ -0,0 +1,154 @@
+import{__decorate as e}from"../../../../../_virtual/_tslib.js";import"../../../../@lit/reactive-element/reactive-element.js";import{html as t}from"../../../../lit-html/lit-html.js";import"../../../../lit-element/lit-element.js";import{property as i}from"../../../../@lit/reactive-element/decorators/property.js";import{state as s}from"../../../../@lit/reactive-element/decorators/state.js";import l from"../../base/sgds-element.js";import o from"./masthead.js";import r from"../../styles/svg.js";import n from"../../styles/anchor.js";class a extends l{constructor(){super(...arguments),this.fluid=!1,this.toggleVisibility=!1}_handleKeydown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this._toggleVisibility())}_toggleVisibility(){this.toggleVisibility=!this.toggleVisibility}render(){return t`
+      <div id="sgds-masthead" class="sgds-masthead">
+        <div class="banner">
+          <div class="container">
+            <div class="masthead-layout">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                class="sg-crest"
+                viewBox="0 0 20 20"
+                fill="none"
+              >
+                <path
+                  d="M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z"
+                  fill="currentColor"
+                />
+              </svg>
+              <div class="masthead-text-layout">
+                <span>A Singapore Government Agency Website</span>
+                <div
+                  class="sgds-masthead-button"
+                  id="sgds-masthead-identify"
+                  role="button"
+                  tabindex="0"
+                  aria-expanded="${this.toggleVisibility}"
+                  aria-controls="sgds-masthead-content"
+                  @keydown=${this._handleKeydown}
+                  @click=${this._toggleVisibility}
+                >
+                  <span>How to identify</span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    class="sgds-masthead-identify-icon ${this.toggleVisibility?"show":null}"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div
+            id="sgds-masthead-content"
+            class="container sgds-masthead-content ${this.toggleVisibility?"show":null}"
+          >
+            <div class="content-grid">
+              <div class="wrapper">
+                <div class="icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    class="banner-icon"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M2 5.85166C2 5.61356 2.12699 5.39354 2.33315 5.27442L7.66648 2.19294C7.87284 2.07371 8.12716 2.07371 8.33352 2.19294L13.6669 5.27442C13.873 5.39354 14 5.61356 14 5.85166V6.66691C14 7.0351 13.7015 7.33357 13.3333 7.33357H12.6667V12.0002H13.3333C13.7015 12.0002 14 12.2987 14 12.6669V13.3336C14 13.7018 13.7015 14.0002 13.3333 14.0002H2.66667C2.29848 14.0002 2 13.7018 2 13.3336V12.6669C2 12.2987 2.29848 12.0002 2.66667 12.0002H3.33333V7.33357H2.66667C2.29848 7.33357 2 7.0351 2 6.66691V5.85166ZM5.33333 7.33357V12.0002H7V7.33357H5.33333ZM9 7.33357V12.0002H10.6667V7.33357H9ZM9 5.00024C9 5.55252 8.55229 6.00024 8 6.00024C7.44772 6.00024 7 5.55252 7 5.00024C7 4.44795 7.44772 4.00024 8 4.00024C8.55229 4.00024 9 4.44795 9 5.00024Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div class="content">
+                  <div class="title">Official website links end with .gov.sg</div>
+                  <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>
+                  <a
+                    href="https://www.gov.sg/trusted-sites#govsites"
+                    class="trusted-websites-link"
+                    rel="noreferrer"
+                    target="_blank"
+                    >Trusted websites</a
+                  >
+                </div>
+              </div>
+              <div class="wrapper">
+                <div class="icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    class="banner-icon"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M5.3335 6.66683H5.00016C4.07969 6.66683 3.3335 7.41302 3.3335 8.3335V13.0002C3.3335 13.9206 4.07969 14.6668 5.00016 14.6668H12.3335C13.254 14.6668 14.0002 13.9206 14.0002 13.0002V8.3335C14.0002 7.41302 13.254 6.66683 12.3335 6.66683H12.0002V4.66683C12.0002 2.82588 10.5078 1.3335 8.66683 1.3335C6.82588 1.3335 5.3335 2.82588 5.3335 4.66683V6.66683ZM6.66683 6.66683H10.6668V4.66683C10.6668 3.56226 9.7714 2.66683 8.66683 2.66683C7.56226 2.66683 6.66683 3.56226 6.66683 4.66683V6.66683Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div class="content">
+                  <div class="title">Secure websites use HTTPS</div>
+                  <article>
+                    Look for a lock (<svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      class="banner-icon-inline"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M5.83331 8.33317H5.41665C4.26605 8.33317 3.33331 9.26591 3.33331 10.4165V16.2498C3.33331 17.4004 4.26605 18.3332 5.41665 18.3332H14.5833C15.7339 18.3332 16.6666 17.4004 16.6666 16.2498V10.4165C16.6666 9.26591 15.7339 8.33317 14.5833 8.33317H14.1666V5.83317C14.1666 3.53198 12.3012 1.6665 9.99998 1.6665C7.69879 1.6665 5.83331 3.53198 5.83331 5.83317V8.33317ZM7.49998 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 9.99998 3.33317C8.61927 3.33317 7.49998 4.45246 7.49998 5.83317V8.33317Z"
+                        fill="currentColor"
+                      /></svg
+                    >) or https:// as an added precaution. Share sensitive information only on official, secure
+                    websites.
+                  </article>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `}}a.styles=[...l.styles,r,n,o],e([i({type:Boolean,reflect:!0})],a.prototype,"fluid",void 0),e([s()],a.prototype,"toggleVisibility",void 0);export{a as SgdsMasthead,a as default};
+//# sourceMappingURL=sgds-masthead.js.map

package/external/@govtechsg/sgds-web-component/components/Masthead/sgds-masthead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-masthead.js","sources":["../../../../../../node_modules/@govtechsg/sgds-web-component/components/Masthead/sgds-masthead.js"],"sourcesContent":["import { __decorate } from 'tslib';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport SgdsElement from '../../base/sgds-element.js';\nimport css_248z$2 from './masthead.js';\nimport css_248z from '../../styles/svg.js';\nimport css_248z$1 from '../../styles/anchor.js';\n\n/**\n * @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.\n */\nclass SgdsMasthead extends SgdsElement {\n    constructor() {\n        super(...arguments);\n        /** When true, removes max-width constraint to allow content to stretch full screen width */\n        this.fluid = false;\n        /** @internal */\n        this.toggleVisibility = false;\n    }\n    /** @internal */\n    _handleKeydown(event) {\n        if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            this._toggleVisibility();\n        }\n    }\n    /** @internal */\n    _toggleVisibility() {\n        this.toggleVisibility = !this.toggleVisibility;\n    }\n    render() {\n        return html `\n      <div id=\"sgds-masthead\" class=\"sgds-masthead\">\n        <div class=\"banner\">\n          <div class=\"container\">\n            <div class=\"masthead-layout\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"20\"\n                height=\"20\"\n                class=\"sg-crest\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <div class=\"masthead-text-layout\">\n                <span>A Singapore Government Agency Website</span>\n                <div\n                  class=\"sgds-masthead-button\"\n                  id=\"sgds-masthead-identify\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-expanded=\"${this.toggleVisibility}\"\n                  aria-controls=\"sgds-masthead-content\"\n                  @keydown=${this._handleKeydown}\n                  @click=${this._toggleVisibility}\n                >\n                  <span>How to identify</span>\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"panel\">\n          <div\n            id=\"sgds-masthead-content\"\n            class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n          >\n            <div class=\"content-grid\">\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M2 5.85166C2 5.61356 2.12699 5.39354 2.33315 5.27442L7.66648 2.19294C7.87284 2.07371 8.12716 2.07371 8.33352 2.19294L13.6669 5.27442C13.873 5.39354 14 5.61356 14 5.85166V6.66691C14 7.0351 13.7015 7.33357 13.3333 7.33357H12.6667V12.0002H13.3333C13.7015 12.0002 14 12.2987 14 12.6669V13.3336C14 13.7018 13.7015 14.0002 13.3333 14.0002H2.66667C2.29848 14.0002 2 13.7018 2 13.3336V12.6669C2 12.2987 2.29848 12.0002 2.66667 12.0002H3.33333V7.33357H2.66667C2.29848 7.33357 2 7.0351 2 6.66691V5.85166ZM5.33333 7.33357V12.0002H7V7.33357H5.33333ZM9 7.33357V12.0002H10.6667V7.33357H9ZM9 5.00024C9 5.55252 8.55229 6.00024 8 6.00024C7.44772 6.00024 7 5.55252 7 5.00024C7 4.44795 7.44772 4.00024 8 4.00024C8.55229 4.00024 9 4.44795 9 5.00024Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Official website links end with .gov.sg</div>\n                  <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n                  <a\n                    href=\"https://www.gov.sg/trusted-sites#govsites\"\n                    class=\"trusted-websites-link\"\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    >Trusted websites</a\n                  >\n                </div>\n              </div>\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M5.3335 6.66683H5.00016C4.07969 6.66683 3.3335 7.41302 3.3335 8.3335V13.0002C3.3335 13.9206 4.07969 14.6668 5.00016 14.6668H12.3335C13.254 14.6668 14.0002 13.9206 14.0002 13.0002V8.3335C14.0002 7.41302 13.254 6.66683 12.3335 6.66683H12.0002V4.66683C12.0002 2.82588 10.5078 1.3335 8.66683 1.3335C6.82588 1.3335 5.3335 2.82588 5.3335 4.66683V6.66683ZM6.66683 6.66683H10.6668V4.66683C10.6668 3.56226 9.7714 2.66683 8.66683 2.66683C7.56226 2.66683 6.66683 3.56226 6.66683 4.66683V6.66683Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Secure websites use HTTPS</div>\n                  <article>\n                    Look for a lock (<svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"none\"\n                      class=\"banner-icon-inline\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M5.83331 8.33317H5.41665C4.26605 8.33317 3.33331 9.26591 3.33331 10.4165V16.2498C3.33331 17.4004 4.26605 18.3332 5.41665 18.3332H14.5833C15.7339 18.3332 16.6666 17.4004 16.6666 16.2498V10.4165C16.6666 9.26591 15.7339 8.33317 14.5833 8.33317H14.1666V5.83317C14.1666 3.53198 12.3012 1.6665 9.99998 1.6665C7.69879 1.6665 5.83331 3.53198 5.83331 5.83317V8.33317ZM7.49998 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 9.99998 3.33317C8.61927 3.33317 7.49998 4.45246 7.49998 5.83317V8.33317Z\"\n                        fill=\"currentColor\"\n                      /></svg\n                    >) or https:// as an added precaution. Share sensitive information only on official, secure\n                    websites.\n                  </article>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n    }\n}\nSgdsMasthead.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2];\n__decorate([\n    property({ type: Boolean, reflect: true })\n], SgdsMasthead.prototype, \"fluid\", void 0);\n__decorate([\n    state()\n], SgdsMasthead.prototype, \"toggleVisibility\", void 0);\n\nexport { SgdsMasthead, SgdsMasthead as default };\n//# sourceMappingURL=sgds-masthead.js.map\n"],"names":["SgdsMasthead","SgdsElement","constructor","super","arguments","this","fluid","toggleVisibility","_handleKeydown","event","key","preventDefault","_toggleVisibility","render","html","styles","css_248z","css_248z$1","css_248z$2","__decorate","property","type","Boolean","reflect","prototype","state"],"mappings":"shBAWA,MAAMA,UAAqBC,EACvB,WAAAC,GACIC,SAASC,WAETC,KAAKC,OAAQ,EAEbD,KAAKE,kBAAmB,CAC5B,CAEA,cAAAC,CAAeC,GACO,UAAdA,EAAMC,KAAiC,MAAdD,EAAMC,MAC/BD,EAAME,iBACNN,KAAKO,oBAEb,CAEA,iBAAAA,GACIP,KAAKE,kBAAoBF,KAAKE,gBAClC,CACA,MAAAM,GACI,OAAOC,CAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCA6CeT,KAAKE;;6BAEXF,KAAKG;2BACPH,KAAKO;;;;;;;;;yDAS0BP,KAAKE,iBAA0B,OAAP;;;;;;;;;;;;;;;;;;qDAkB7BF,KAAKE,iBAAmB,OAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8ElF,EAEJP,EAAae,OAAS,IAAId,EAAYc,OAAQC,EAAUC,EAAYC,GACpEC,EAAW,CACPC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCvB,EAAawB,UAAW,aAAS,GACpCL,EAAW,CACPM,KACDzB,EAAawB,UAAW,wBAAoB","x_google_ignoreList":[0]}

package/external/@govtechsg/sgds-web-component/styles/anchor.js

@@ -0,0 +1,2 @@
+import"../../../@lit/reactive-element/reactive-element.js";import"../../../lit-html/lit-html.js";import"../../../lit-element/lit-element.js";import{css as e}from"../../../@lit/reactive-element/css-tag.js";var a=e`::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}`;export{a as default};
+//# sourceMappingURL=anchor.js.map