@lifesg/react-design-system 4.0.0-alpha.4 → 4.0.0-alpha.6

package/modal-v2/index.d.ts

@@ -1,16 +1,2 @@
-export declare const ModalV2: (({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disableInitialFocus, className, ...otherProps }: import("./types").ModalV2Props) => JSX.Element) & {
-    Card: (props: import("./types").ModalCardProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    CloseButton: {
-        ({ "data-testid": testId, className, ...otherProps }: import("./types").ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Content: {
-        ({ "data-testid": testId, children, className, ...otherProps }: import("./types").ModalContentProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ "data-testid": testId, primaryButton, secondaryButton, className, ...otherProps }: import("./types").ModalFooterProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-};
+export * from "./modal-v2";
 export * from "./types";

package/modal-v2/index.js

@@ -1,2 +1,2 @@
-import{ModalV2 as o}from"./modal-v2.js";import{Card as t}from"./slots/card.js";import{CloseButton as s}from"./slots/close-button.js";import{Content as r}from"./slots/content.js";import{Footer as m}from"./slots/footer.js";const e=Object.assign(o,{Card:t,CloseButton:s,Content:r,Footer:m});export{e as ModalV2};
+export{ModalV2}from"./modal-v2.js";
 //# sourceMappingURL=index.js.map

package/modal-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/modal-v2/index.ts"],"sourcesContent":["import { ModalV2 as Base } from \"./modal-v2\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\n\nexport const ModalV2 = Object.assign(Base, {\n    Card,\n    CloseButton,\n    Content,\n    Footer,\n});\n\nexport * from \"./types\";\n"],"names":["ModalV2","Object","assign","Base","Card","CloseButton","Content","Footer"],"mappings":"mOAGaA,EAAUC,OAAOC,OAAOC,EAAM,CACvCC,OACAC,cACAC,UACAC"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/modal-v2/modal-v2.d.ts

@@ -1,2 +1,33 @@
+import React from "react";
 import type { ModalV2Props } from "./types";
-export declare const ModalV2: ({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disableInitialFocus, className, ...otherProps }: ModalV2Props) => JSX.Element;
+/**
+ * A composable modal dialog with slot-based content layout.
+ *
+ * Use `ModalV2` when you need a controlled overlay dialog with structured
+ * content slots.
+ *
+ * Sub-components:
+ * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.
+ * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.
+ * - `ModalV2.Content` — container for the body content of the modal card.
+ * - `ModalV2.Footer` — footer area for primary and secondary action buttons.
+ */
+export declare const ModalV2: (({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disableInitialFocus, className, ...otherProps }: ModalV2Props) => JSX.Element) & {
+    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. */
+    Card: (props: import("./types").ModalCardProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** Renders an accessible close button that invokes the modal's `onClose` callback. */
+    CloseButton: {
+        ({ "data-testid": testId, className, ...otherProps }: import("./types").ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Container for the body content of the modal card. */
+    Content: {
+        ({ "data-testid": testId, children, className, ...otherProps }: import("./types").ModalContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Footer area for primary and secondary action buttons. */
+    Footer: {
+        ({ "data-testid": testId, primaryButton, secondaryButton, className, ...otherProps }: import("./types").ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/modal-v2/modal-v2.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useFloating as o,useTransitionStatus as i,useDismiss as r,useInteractions as a,FloatingFocusManager as l}from"@floating-ui/react";import s from"clsx";import n,{useRef as m}from"react";import{Overlay as d}from"../overlay/overlay.js";import{useViewport as c}from"../shared/hooks/useViewport.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as p}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as u}from"../util/use-event.js";import{ModalContext as b}from"./modal-context.js";import{tokens as h,scrollContainer as v,modalContainer as y,container as j}from"./modal-v2.styles.js";const f=f=>{var{id:g,show:x,onClose:C,animationFrom:k="bottom",children:O,enableOverlayClick:I=!0,rootComponentId:F,zIndex:w,onOverlayClick:N,dismissKeyboardOnShow:z=!0,"data-testid":P="modal","aria-label":S,"aria-labelledby":q,"aria-describedby":E,disableInitialFocus:H=!1,className:K}=f,$=e(f,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const _=u((()=>{var e,t;z&&(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===t||t.call(e))})),{verticalHeight:B}=c({enabled:x,onBeforeStart:_}),M=m(null),R=m(null),V=O&&n.cloneElement(O,{ref:M});p(R,{[h.container.verticalHeight]:null==B?null:`${B}px`});const{refs:A,context:D}=o({open:x,onOpenChange:e=>{e||null==C||C()}}),{isMounted:G,status:J}=i(D,{duration:300}),L=r(D,{outsidePress:!1,enabled:!!C}),{getFloatingProps:Q}=a([L]);return t(d,{"data-testid":`${P}-overlay`,show:x,enableOverlayClick:I,onOverlayClick:N,id:g,rootId:F,containerRef:M,zIndex:w,children:t("div",Object.assign({ref:R,"data-testid":P,"data-status":J,"data-animation-from":k},$,{className:s(j,K),children:t(b.Provider,{value:{onClose:C},children:G&&t(l,{context:D,initialFocus:H?-1:A.floating,children:t("div",{className:v,children:t("div",Object.assign({ref:A.setFloating},Q(),{role:"dialog","aria-label":S,"aria-labelledby":q,"aria-describedby":E,className:y,children:V}))})})})}))})};export{f as ModalV2};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{useFloating as t,useTransitionStatus as r,useDismiss as i,useInteractions as a,FloatingFocusManager as l}from"@floating-ui/react";import s from"clsx";import n,{useRef as m}from"react";import{Overlay as d}from"../overlay/overlay.js";import{useViewport as c}from"../shared/hooks/useViewport.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as p}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as u}from"../util/use-event.js";import{ModalContext as b}from"./modal-context.js";import{tokens as h,scrollContainer as j,modalContainer as v,container as f}from"./modal-v2.styles.js";import{Card as y}from"./slots/card.js";import{CloseButton as C}from"./slots/close-button.js";import{Content as g}from"./slots/content.js";import{Footer as x}from"./slots/footer.js";const O=Object.assign((y=>{var{id:C,show:g,onClose:x,animationFrom:O="bottom",children:k,enableOverlayClick:F=!0,rootComponentId:I,zIndex:w,onOverlayClick:N,dismissKeyboardOnShow:z=!0,"data-testid":P="modal","aria-label":S,"aria-labelledby":q,"aria-describedby":B,disableInitialFocus:E=!1,className:H}=y,K=e(y,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const $=u((()=>{var e,o;z&&(null===(o=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===o||o.call(e))})),{verticalHeight:_}=c({enabled:g,onBeforeStart:$}),M=m(null),R=m(null),V=k&&n.cloneElement(k,{ref:M});p(R,{[h.container.verticalHeight]:null==_?null:`${_}px`});const{refs:A,context:D}=t({open:g,onOpenChange:e=>{e||null==x||x()}}),{isMounted:G,status:J}=r(D,{duration:300}),L=i(D,{outsidePress:!1,enabled:!!x}),{getFloatingProps:Q}=a([L]);return o(d,{"data-testid":`${P}-overlay`,show:g,enableOverlayClick:F,onOverlayClick:N,id:C,rootId:I,containerRef:M,zIndex:w,children:o("div",Object.assign({ref:R,"data-testid":P,"data-status":J,"data-animation-from":O},K,{className:s(f,H),children:o(b.Provider,{value:{onClose:x},children:G&&o(l,{context:D,initialFocus:E?-1:A.floating,children:o("div",{className:j,children:o("div",Object.assign({ref:A.setFloating},Q(),{role:"dialog","aria-label":S,"aria-labelledby":q,"aria-describedby":B,className:v,children:V}))})})})}))})}),{Card:y,CloseButton:C,Content:g,Footer:x});export{O as ModalV2};
 //# sourceMappingURL=modal-v2.js.map

package/modal-v2/modal-v2.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ModalV2","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"4kCAkBO,MAAMA,EAAWC,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAlB,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,MAAMmB,EAAkBC,GAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,EAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACF3B,GAAY4B,EAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,EAAgB,CAACJ,IAK9C,OACIK,EAACC,EAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAA,MAAAG,OAAAC,OAAA,CACIvB,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAW2C,EAAKC,EAAkB5C,GAAUX,SAE5CiD,EAACO,EAAaC,SAAQ,CAACC,MAAO,CAAE5D,WAASE,SACpCwC,GACGS,EAACU,EAAoB,CACjBxB,QAASA,EACTyB,aACIlD,GAAsB,EAAKwB,EAAK2B,SAAQ7D,SAG5CiD,EAAA,MAAA,CAAKtC,UAAWmD,EAAsB9D,SAClCiD,EAAA,MAAAG,OAAAC,OAAA,CACIvB,IAAKI,EAAK6B,aACNhB,IAAkB,CACtBiB,KAAK,SAAQ,aACDzD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWsD,WAEVtC,eAOnB"}
+{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n\n/**\n * A composable modal dialog with slot-based content layout.\n *\n * Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n *\n * Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n */\nexport const ModalV2 = Object.assign(Base, {\n    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. */\n    Card,\n    /** Renders an accessible close button that invokes the modal's `onClose` callback. */\n    CloseButton,\n    /** Container for the body content of the modal card. */\n    Content,\n    /** Footer area for primary and secondary action buttons. */\n    Footer,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer"],"mappings":"iwCAmBA,MA6HaA,EAAUC,OAAOC,QA7HhBC,QAAAC,GACVA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,GAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,EAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACF3B,GAAY4B,EAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,EAAgB,CAACJ,IAK9C,OACIK,EAACC,EAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,EAAKC,EAAkB1C,GAAUX,SAE5CiD,EAACK,EAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAACQ,EAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAA,MAAA,CAAKtC,UAAWiD,EAAsB5D,SAClCiD,EAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,WAEVpC,eAOnB,GAgByB,CAEvCqC,OAEAC,cAEAC,UAEAC"}

package/modal-v2/modal-v2.styles_a8gv5i.css

@@ -1,3 +1,3 @@
-.c1jrmyjd{position:relative;width:100%;height:100%;overflow:auto;--fds-internal-modalV2-container-verticalHeight:initial;}:where(body.fds-breakpoint-sm-max) .c1jrmyjd{height:calc(var(--fds-internal-modalV2-container-verticalHeight, 1vh) * 100);}@supports (height: 100dvh){.c1jrmyjd{height:100dvh;}}.c1jrmyjd[data-status="initial"]{opacity:0;}.c1jrmyjd[data-status="open"]{opacity:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition-delay:var(--fds-motion-duration-150);}.c1jrmyjd[data-status="close"]{opacity:0;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);}.c1jrmyjd[data-animation-from="top"]:is([data-status="initial"], [data-status="close"]){top:-3%;}.c1jrmyjd[data-animation-from="top"][data-status="open"]{top:0;}.c1jrmyjd[data-animation-from="bottom"]:is([data-status="initial"], [data-status="close"]){bottom:-3%;}.c1jrmyjd[data-animation-from="bottom"][data-status="open"]{bottom:0;}.c1jrmyjd[data-animation-from="left"]:is([data-status="initial"], [data-status="close"]){left:-3%;}.c1jrmyjd[data-animation-from="left"][data-status="open"]{left:0;}.c1jrmyjd[data-animation-from="right"]:is([data-status="initial"], [data-status="close"]){right:-3%;}.c1jrmyjd[data-animation-from="right"][data-status="open"]{right:0;}
+@layer fds{.c1jrmyjd{position:relative;width:100%;height:100%;overflow:auto;--fds-internal-modalV2-container-verticalHeight:initial;}:where(body.fds-breakpoint-sm-max) .c1jrmyjd{height:calc(var(--fds-internal-modalV2-container-verticalHeight, 1vh) * 100);}@supports (height: 100dvh){.c1jrmyjd{height:100dvh;}}.c1jrmyjd[data-status="initial"]{opacity:0;}.c1jrmyjd[data-status="open"]{opacity:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition-delay:var(--fds-motion-duration-150);}.c1jrmyjd[data-status="close"]{opacity:0;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);}.c1jrmyjd[data-animation-from="top"]:is([data-status="initial"], [data-status="close"]){top:-3%;}.c1jrmyjd[data-animation-from="top"][data-status="open"]{top:0;}.c1jrmyjd[data-animation-from="bottom"]:is([data-status="initial"], [data-status="close"]){bottom:-3%;}.c1jrmyjd[data-animation-from="bottom"][data-status="open"]{bottom:0;}.c1jrmyjd[data-animation-from="left"]:is([data-status="initial"], [data-status="close"]){left:-3%;}.c1jrmyjd[data-animation-from="left"][data-status="open"]{left:0;}.c1jrmyjd[data-animation-from="right"]:is([data-status="initial"], [data-status="close"]){right:-3%;}.c1jrmyjd[data-animation-from="right"][data-status="open"]{right:0;}
 .s1xsiaxz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:100%;pointer-events:none;}
-.mn5ir3{pointer-events:auto;width:100%;outline:none;}
+.mn5ir3{pointer-events:auto;width:100%;outline:none;}}

package/modal-v2/slots/card.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as r}from"react/jsx-runtime";import o from"clsx";import s from"react";import a from"../../util/is-styled-components.js";import{CloseButton as e}from"./close-button.js";import{Content as i}from"./content.js";import{Footer as m}from"./footer.js";import{slotSpacer as d,modalCard as l}from"./slot-styles.js";const c=s.forwardRef((function(c,n){var{id:p,"data-testid":f="modal-card",children:j,className:u}=c,y=t(c,["id","data-testid","children","className"]);const h=t=>s.Children.toArray(j).find((r=>((t,r)=>a(t.type)?t.type.target===r:t.type===r)(r,t))),N=h(e),b=h(i),v=h(m),g=!!N;return r("div",Object.assign({ref:n,id:p,"data-testid":f},y,{onClick:t=>{t.stopPropagation()},className:o(l,u),children:[r("div",{"data-has-close-button":g?"true":"false",className:o(d),children:[b,v]}),g&&N]}))}));c.displayName="ModalV2.Card";export{c as Card};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as r}from"react/jsx-runtime";import e from"clsx";import i from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as o}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import s from"../../util/is-styled-components.js";import{CloseButton as a}from"./close-button.js";import{Content as m}from"./content.js";import{Footer as l}from"./footer.js";import{slotSpacer as n,modalCard as d}from"./slot-styles.js";const p=i.forwardRef((function(p,c){var{id:f,"data-testid":j="modal-card",children:u,className:y,elementRef:h}=p,g=t(p,["id","data-testid","children","className","elementRef"]);const v=t=>i.Children.toArray(u).find((r=>((t,r)=>s(t.type)?t.type.target===r:t.type===r)(r,t))),N=v(a),b=v(m),x=v(l),C=!!N;return r("div",Object.assign({ref:o(c,h),id:f,"data-testid":j},g,{onClick:t=>{t.stopPropagation()},className:e(d,y),children:[r("div",{"data-has-close-button":C?"true":"false",className:e(n),children:[b,x]}),C&&N]}))}));p.displayName="ModalV2.Card";export{p as Card};
 //# sourceMappingURL=card.js.map

package/modal-v2/slots/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport isStyledComponent from \"../../util/is-styled-components\";\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <div\n            ref={ref}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasCloseButton && CloseButtonSlot}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"+WAwEO,MAAMA,EAAOC,EAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,EAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,GACtCC,EAAcX,EAAoBY,GAClCC,EAAab,EAAoBc,GAEjCC,IAAmBN,EAEzB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAKC,EAAkB1B,GAAUD,SAAA,CAE5CoB,EAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAKE,GAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}
+{"version":3,"file":"card.js","sources":["../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { mergeRefs } from \"../../util\";\nimport isStyledComponent from \"../../util/is-styled-components\";\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        elementRef,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <div\n            ref={mergeRefs(ref, elementRef)}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasCloseButton && CloseButtonSlot}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","elementRef","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","mergeRefs","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"qmBA0EO,MAAMA,EAAOC,EAAMC,YA9D1B,SACIC,EAQAC,GARA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,EAASC,WACTA,GAAUN,EACPO,EAAUC,EAAAR,EANjB,0DAaA,MAYMS,EAAuBC,GAClBZ,EAAMa,SAASC,QAAQR,GAAUS,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,GACtCC,EAAcX,EAAoBY,GAClCC,EAAab,EAAoBc,GAEjCC,IAAmBN,EAEzB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACI1B,IAAK2B,EAAU3B,EAAKK,GACpBJ,GAAIA,EAAE,cACOC,GACTI,EAAU,CACdsB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnB1B,UAAW2B,EAAKC,EAAkB5B,GAAUD,SAAA,CAE5CqB,EAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDnB,UAAW2B,EAAKE,GAAkB9B,SAAA,CAEjCgB,EACAE,KAEJE,GAAkBN,KAG/B,IAICrB,EAA8BsC,YAAc"}

package/modal-v2/slots/slot-styles_13sd376.css

@@ -1,4 +1,4 @@
-.metykyj{width:40rem;margin:var(--fds-spacing-64) auto;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-strong);border-radius:var(--fds-radius-lg);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;max-width:calc(100% - var(--fds-breakpoint-margin-xxl) * 2);}:where(body.fds-breakpoint-xl-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xl) * 2);}:where(body.fds-breakpoint-lg-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-lg) * 2);}:where(body.fds-breakpoint-md-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-md) * 2);}:where(body.fds-breakpoint-sm-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xxs) * 2);}
+@layer fds{.metykyj{width:40rem;margin:var(--fds-spacing-64) auto;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-strong);border-radius:var(--fds-radius-lg);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;max-width:calc(100% - var(--fds-breakpoint-margin-xxl) * 2);}:where(body.fds-breakpoint-xl-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xl) * 2);}:where(body.fds-breakpoint-lg-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-lg) * 2);}:where(body.fds-breakpoint-md-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-md) * 2);}:where(body.fds-breakpoint-sm-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xxs) * 2);}
 .c1247joo{margin-right:var(--fds-spacing-16);margin-left:auto;margin-top:var(--fds-spacing-16);margin-bottom:var(--fds-spacing-16);}
 .st53q25{padding:0;color:var(--fds-colour-icon);}.st53q25 svg{height:2rem;width:2rem;}
 .c1ls09wh{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);}:where(body.fds-breakpoint-sm-max) .c1ls09wh{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}
@@ -23,4 +23,4 @@
         );}.s1vsayl1[data-has-close-button="false"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
             --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
             var(--fds-spacing-64)
-        );}
+        );}}

package/modal-v2/types.d.ts

@@ -1,38 +1,105 @@
+/**
+ * Direction from which the modal animates in and out.
+ */
 export type ModalAnimationDirection = "top" | "bottom" | "left" | "right";
+/**
+ * Props for the `ModalV2.Card` sub-component.
+ */
 export interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
     children: React.ReactNode;
+    /**
+     * Ref to the modal card DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead.
+     */
+    elementRef?: React.Ref<HTMLDivElement> | undefined;
 }
+/**
+ * Props for the `ModalV2.CloseButton` slot.
+ */
 export interface ModalCloseButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `ModalV2.Content` slot.
+ */
 export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
     children: React.ReactNode;
 }
+/**
+ * Props for the `ModalV2.Footer` slot.
+ */
 export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
+    /**
+     * Node rendered in the primary action position.
+     */
     primaryButton?: React.ReactNode | undefined;
+    /**
+     * Node rendered in the secondary action position.
+     */
     secondaryButton?: React.ReactNode | undefined;
 }
+/**
+ * Props for the `ModalV2` component.
+ */
 export interface ModalV2Props extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
+    /**
+     * Controls whether the modal is visible.
+     */
     show: boolean;
-    /** The content of the modal. The parent element must be a valid HTML
-     * element or a component that forwards a ref to a valid HTML element. This
-     * element is used to determine the boundaries for overlay click
-     * detection. Fragments are not supported. */
+    /**
+     * The content of the modal. The parent element must be a valid HTML
+     * element or a component that forwards a ref to a valid HTML element.
+     *
+     * @remarks This element is used to determine the boundaries for overlay click detection.
+     */
     children: React.JSX.Element;
-    /** Animation direction of appearance and dismissal. Values: "top" | "bottom" | "left" | "right" */
+    /**
+     * Direction from which the modal animates in and out.
+     *
+     * @default "bottom"
+     */
     animationFrom?: ModalAnimationDirection | undefined;
+    /**
+     * Whether clicking the overlay backdrop triggers `onOverlayClick`.
+     * The caller is responsible for dismissing the modal in the callback.
+     *
+     * @default true
+     */
     enableOverlayClick?: boolean | undefined;
-    /** The identifier of the element to inject the Modal into */
+    /**
+     * The `id` of the DOM element to portal the modal into.
+     */
     rootComponentId?: string | undefined;
+    /**
+     * The z-index applied to the overlay stack.
+     */
     zIndex?: number | undefined;
+    /**
+     * Called when the modal is dismissed via the Escape key and close button.
+     */
     onClose?: (() => void) | undefined;
+    /**
+     * Called when the overlay backdrop is clicked and `enableOverlayClick` is
+     * `true`.
+     */
     onOverlayClick?: (() => void) | undefined;
-    /** Dismiss keyboard to keep modal in fullscreen */
+    /**
+     * Blurs the currently focused element when the modal becomes visible,
+     * dismissing the on-screen keyboard on mobile to prevent it from
+     * obscuring the modal.
+     *
+     * @default true
+     */
     dismissKeyboardOnShow?: boolean | undefined;
-    /** Disable automatic initial focus on show. Consumer must focus an element within the modal. */
+    /**
+     * Disables automatic focus on the modal container when it opens. When
+     * `true`, the consumer is responsible for focusing an element within the
+     * modal.
+     *
+     * @default false
+     */
     disableInitialFocus?: boolean | undefined;
 }

package/navbar/brand.styles_zcgddp.css

@@ -1 +1 @@
-.cw4lf53{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;}.cw4lf53 img{width:auto;height:100%;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);object-fit:contain;}
+@layer fds{.cw4lf53{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;}.cw4lf53 img{width:auto;height:100%;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);object-fit:contain;}}

package/navbar/drawer.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r,Fragment as i}from"react/jsx-runtime";import{CrossIcon as t}from"@lifesg/react-icons/cross";import o from"clsx";import s,{useState as a,useRef as n,useEffect as d,useLayoutEffect as c}from"react";import{ClickableIcon as l}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as m}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Brand as p}from"./brand.js";import{tokens as u,wrapper as h,content as f,container as v,containerShown as w,containerHidden as y,topBar as b,closeButton as j,closeIcon as k}from"./drawer.styles.js";import{navBrandContainer as N,navBrandContainerCompressed as g,navBrandContainerResponsive as x,navSeparator as C,navSeparatorCompressed as _,navSeparatorResponsive as E}from"./navbar.styles.js";const H=s.forwardRef(((s,H)=>{const{show:L,resources:T={},children:q,hideNavBranding:z,onClose:B,onBrandClick:D,drawerLabel:M="Mobile navigation menu",mobileMenuRef:R}=s,[I,K]=a(0),S=n(null);m(S,{[u.container.viewHeight]:I?`${I}px`:null});const{primary:$,secondary:A}=T,F=()=>{if(window){const e=.01*window.innerHeight;K(e)}};d((()=>(F(),window.addEventListener("resize",F),()=>{window.removeEventListener("resize",F)})),[]),c((()=>{if(L){const e=setTimeout((()=>{S.current&&S.current.focus({preventScroll:!0})}),550);return()=>clearTimeout(e)}}),[L]);return e("div",{className:h,ref:H,"data-testid":"drawer",children:e("nav",{ref:S,className:o(v,L?w:y),onKeyDown:e=>{L&&"Escape"===e.key&&(e.preventDefault(),null==B||B(),setTimeout((()=>{var e;null===(e=null==R?void 0:R.current)||void 0===e||e.focus()}),300))},tabIndex:L?0:-1,"aria-label":M,children:r("div",{className:f,children:[r("div",{className:b,children:[e("div",{className:o(N,g,x),"data-id":"drawer-brand-container",children:!z&&r(i,{children:[$&&e(p,{resources:$,compress:!0,onClick:D,"data-id":"drawer-brand-primary","data-testid":"drawer__brand",type:"primary"}),A&&r(i,{children:[e("div",{className:o(C,_,E)}),e(p,{resources:A,compress:!0,onClick:D,"data-id":"drawer-brand-secondary","data-testid":"drawer__brand-secondary",type:"secondary"})]})]})}),e(l,{className:j,onClick:B,focusHighlight:!1,"aria-label":"Close nav menu",children:e(t,{className:k})})]}),q]})})})}));export{H as Drawer};
+import{jsx as e,jsxs as r,Fragment as i}from"react/jsx-runtime";import{useFloating as t,FloatingFocusManager as o}from"@floating-ui/react";import{CrossIcon as a}from"@lifesg/react-icons/cross";import n from"clsx";import s,{useState as l,useRef as d,useEffect as m,useLayoutEffect as c}from"react";import{ClickableIcon as p}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as u}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as h}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Brand as f}from"./brand.js";import{tokens as v,wrapper as j,content as w,container as y,containerShown as b,containerHidden as g,topBar as k,closeButton as x,closeIcon as N}from"./drawer.styles.js";import{navBrandContainer as C,navBrandContainerCompressed as _,navBrandContainerResponsive as E,navSeparator as F,navSeparatorCompressed as H,navSeparatorResponsive as L}from"./navbar.styles.js";const T=s.forwardRef(((s,T)=>{const{show:q,resources:z={},children:B,hideNavBranding:D,onClose:M,onBrandClick:R,drawerLabel:I="Mobile navigation menu",mobileMenuRef:K}=s,[O,S]=l(0),$=d(null);u($,{[v.container.viewHeight]:O?`${O}px`:null});const{primary:A,secondary:G}=z,{context:J,refs:P}=t({open:q,onOpenChange:e=>{!e&&M&&M()}}),Q=()=>{if(window){const e=.01*window.innerHeight;S(e)}};m((()=>(Q(),window.addEventListener("resize",Q),()=>{window.removeEventListener("resize",Q)})),[]),c((()=>{if(q){const e=setTimeout((()=>{$.current&&$.current.focus({preventScroll:!0})}),550);return()=>clearTimeout(e)}}),[q]);return e(o,{context:J,initialFocus:-1,returnFocus:!0,disabled:!q,children:e("div",{className:j,ref:h(T,P.setFloating),"data-testid":"drawer",children:e("nav",{ref:$,className:n(y,q?b:g),onKeyDown:e=>{q&&"Escape"===e.key&&(e.preventDefault(),null==M||M(),setTimeout((()=>{var e;null===(e=null==K?void 0:K.current)||void 0===e||e.focus()}),300))},tabIndex:-1,"aria-label":I,children:r("div",{className:w,children:[r("div",{className:k,children:[e("div",{className:n(C,_,E),"data-id":"drawer-brand-container",children:!D&&r(i,{children:[A&&e(f,{resources:A,compress:!0,onClick:R,"data-id":"drawer-brand-primary","data-testid":"drawer__brand",type:"primary"}),G&&r(i,{children:[e("div",{className:n(F,H,L)}),e(f,{resources:G,compress:!0,onClick:R,"data-id":"drawer-brand-secondary","data-testid":"drawer__brand-secondary",type:"secondary"})]})]})}),e(p,{className:x,onClick:M,focusHighlight:!1,"aria-label":"Close nav menu",children:e(a,{className:N})})]}),B]})})})})}));export{T as Drawer};
 //# sourceMappingURL=drawer.js.map

package/navbar/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../src/navbar/drawer.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { Brand } from \"./brand\";\nimport * as styles from \"./drawer.styles\";\nimport * as navbarStyles from \"./navbar.styles\";\nimport type { NavbarDrawerProps } from \"./types\";\n\nconst Component = (\n    props: NavbarDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const {\n        show,\n        resources = {},\n        children,\n        hideNavBranding,\n        onClose,\n        onBrandClick,\n        drawerLabel = \"Mobile navigation menu\",\n        mobileMenuRef,\n    } = props;\n    const [viewHeight, setViewHeight] = useState<number>(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.viewHeight]: viewHeight\n            ? `${viewHeight}px`\n            : null,\n    });\n\n    const { primary, secondary } = resources;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = () => {\n        /**\n         * Reference:\n         * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n         */\n        if (window) {\n            const viewHeight = window.innerHeight * 0.01;\n            setViewHeight(viewHeight);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!show) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onClose?.();\n            // Return focus to the hamburger menu button\n            setTimeout(() => {\n                mobileMenuRef?.current?.focus();\n            }, 300);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // Focus management when drawer opens\n    useLayoutEffect(() => {\n        if (show) {\n            const timer = setTimeout(() => {\n                if (containerRef.current) {\n                    containerRef.current.focus({ preventScroll: true });\n                }\n            }, 550);\n\n            return () => clearTimeout(timer);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderBrand = () => {\n        return (\n            <>\n                {primary && (\n                    <Brand\n                        resources={primary}\n                        compress\n                        onClick={onBrandClick}\n                        data-id=\"drawer-brand-primary\"\n                        data-testid=\"drawer__brand\"\n                        type=\"primary\"\n                    />\n                )}\n                {secondary && (\n                    <>\n                        <div\n                            className={clsx(\n                                navbarStyles.navSeparator,\n                                navbarStyles.navSeparatorCompressed,\n                                navbarStyles.navSeparatorResponsive\n                            )}\n                        />\n                        <Brand\n                            resources={secondary}\n                            compress\n                            onClick={onBrandClick}\n                            data-id=\"drawer-brand-secondary\"\n                            data-testid=\"drawer__brand-secondary\"\n                            type=\"secondary\"\n                        />\n                    </>\n                )}\n            </>\n        );\n    };\n\n    const renderTopBar = () => (\n        <div className={styles.topBar}>\n            <div\n                className={clsx(\n                    navbarStyles.navBrandContainer,\n                    navbarStyles.navBrandContainerCompressed,\n                    navbarStyles.navBrandContainerResponsive\n                )}\n                data-id=\"drawer-brand-container\"\n            >\n                {!hideNavBranding && renderBrand()}\n            </div>\n            <ClickableIcon\n                className={styles.closeButton}\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CrossIcon className={styles.closeIcon} />\n            </ClickableIcon>\n        </div>\n    );\n\n    return (\n        <div className={styles.wrapper} ref={ref} data-testid=\"drawer\">\n            <nav\n                ref={containerRef}\n                className={clsx(\n                    styles.container,\n                    show ? styles.containerShown : styles.containerHidden\n                )}\n                onKeyDown={handleKeyDown}\n                tabIndex={show ? 0 : -1}\n                aria-label={drawerLabel}\n            >\n                <div className={styles.content}>\n                    {renderTopBar()}\n                    {children}\n                </div>\n            </nav>\n        </div>\n    );\n};\n\nexport const Drawer = React.forwardRef(Component);\n"],"names":["Drawer","React","forwardRef","props","ref","show","resources","children","hideNavBranding","onClose","onBrandClick","drawerLabel","mobileMenuRef","viewHeight","setViewHeight","useState","containerRef","useRef","useApplyStyle","styles.tokens","container","primary","secondary","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","className","styles.wrapper","clsx","styles.container","styles.containerShown","styles.containerHidden","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","styles.content","styles.topBar","navbarStyles.navBrandContainer","navbarStyles.navBrandContainerCompressed","navbarStyles.navBrandContainerResponsive","_Fragment","Brand","compress","onClick","type","navbarStyles.navSeparator","navbarStyles.navSeparatorCompressed","navbarStyles.navSeparatorResponsive","ClickableIcon","styles.closeButton","focusHighlight","CrossIcon","styles.closeIcon"],"mappings":"qgCAWA,MAmKaA,EAASC,EAAMC,YAnKV,CACdC,EACAC,KAKA,MAAMC,KACFA,EAAIC,UACJA,EAAY,CAAA,EAAEC,SACdA,EAAQC,gBACRA,EAAeC,QACfA,EAAOC,aACPA,EAAYC,YACZA,EAAc,yBAAwBC,cACtCA,GACAT,GACGU,EAAYC,GAAiBC,EAAiB,GAC/CC,EAAeC,EAAuB,MAE5CC,EAAcF,EAAc,CACxB,CAACG,EAAcC,UAAUP,YAAaA,EAChC,GAAGA,MACH,OAGV,MAAMQ,QAAEA,EAAOC,UAAEA,GAAchB,EAKzBiB,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMX,EAAkC,IAArBW,OAAOC,YAC1BX,EAAcD,EAClB,GAmBJa,GAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,GAAgB,KACZ,GAAIxB,EAAM,CACN,MAAMyB,EAAQC,YAAW,KACjBf,EAAagB,SACbhB,EAAagB,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAACzB,IAgEJ,OACI+B,EAAA,MAAA,CAAKC,UAAWC,EAAgBlC,IAAKA,EAAG,cAAc,SAAQG,SAC1D6B,EAAA,MAAA,CACIhC,IAAKY,EACLqB,UAAWE,EACPC,EACAnC,EAAOoC,EAAwBC,GAEnCC,UA5GWC,IACdvC,GAEa,WAAduC,EAAMC,MACND,EAAME,iBACNrC,SAAAA,IAEAsB,YAAW,WACe,QAAtBgB,EAAAnC,aAAa,EAAbA,EAAeoB,eAAO,IAAAe,GAAAA,EAAEd,OAAO,GAChC,KACP,EAmGQe,SAAU3C,EAAO,GAAI,EAAE,aACXM,WAEZsC,EAAA,MAAA,CAAKZ,UAAWa,EAAc3C,SAAA,CAlCtC0C,EAAA,MAAA,CAAKZ,UAAWc,EAAa5C,SAAA,CACzB6B,SACIC,UAAWE,EACPa,EACAC,EACAC,GACH,UACO,mCAEN9C,GA5CNyC,EAAAM,EAAA,CAAAhD,SAAA,CACKc,GACGe,EAACoB,EAAK,CACFlD,UAAWe,EACXoC,UAAQ,EACRC,QAAShD,EAAY,UACb,uBAAsB,cAClB,gBACZiD,KAAK,YAGZrC,GACG2B,EAAAM,EAAA,CAAAhD,SAAA,CACI6B,EAAA,MAAA,CACIC,UAAWE,EACPqB,EACAC,EACAC,KAGR1B,EAACoB,EAAK,CACFlD,UAAWgB,EACXmC,UAAQ,EACRC,QAAShD,EAAY,UACb,uCACI,0BACZiD,KAAK,sBAoBrBvB,EAAC2B,EAAa,CACV1B,UAAW2B,EACXN,QAASjD,EACTwD,gBAAgB,EAAK,aACV,iBAAgB1D,SAE3B6B,EAAC8B,EAAS,CAAC7B,UAAW8B,SAmBjB5D,QAGP"}
+{"version":3,"file":"drawer.js","sources":["../../src/navbar/drawer.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport { Brand } from \"./brand\";\nimport * as styles from \"./drawer.styles\";\nimport * as navbarStyles from \"./navbar.styles\";\nimport type { NavbarDrawerProps } from \"./types\";\n\nconst Component = (\n    props: NavbarDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const {\n        show,\n        resources = {},\n        children,\n        hideNavBranding,\n        onClose,\n        onBrandClick,\n        drawerLabel = \"Mobile navigation menu\",\n        mobileMenuRef,\n    } = props;\n    const [viewHeight, setViewHeight] = useState<number>(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.viewHeight]: viewHeight\n            ? `${viewHeight}px`\n            : null,\n    });\n\n    const { primary, secondary } = resources;\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs: floatingRefs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = () => {\n        /**\n         * Reference:\n         * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n         */\n        if (window) {\n            const viewHeight = window.innerHeight * 0.01;\n            setViewHeight(viewHeight);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!show) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onClose?.();\n            // Return focus to the hamburger menu button\n            setTimeout(() => {\n                mobileMenuRef?.current?.focus();\n            }, 300);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // Focus management when drawer opens\n    useLayoutEffect(() => {\n        if (show) {\n            const timer = setTimeout(() => {\n                if (containerRef.current) {\n                    containerRef.current.focus({ preventScroll: true });\n                }\n            }, 550);\n\n            return () => clearTimeout(timer);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderBrand = () => {\n        return (\n            <>\n                {primary && (\n                    <Brand\n                        resources={primary}\n                        compress\n                        onClick={onBrandClick}\n                        data-id=\"drawer-brand-primary\"\n                        data-testid=\"drawer__brand\"\n                        type=\"primary\"\n                    />\n                )}\n                {secondary && (\n                    <>\n                        <div\n                            className={clsx(\n                                navbarStyles.navSeparator,\n                                navbarStyles.navSeparatorCompressed,\n                                navbarStyles.navSeparatorResponsive\n                            )}\n                        />\n                        <Brand\n                            resources={secondary}\n                            compress\n                            onClick={onBrandClick}\n                            data-id=\"drawer-brand-secondary\"\n                            data-testid=\"drawer__brand-secondary\"\n                            type=\"secondary\"\n                        />\n                    </>\n                )}\n            </>\n        );\n    };\n\n    const renderTopBar = () => (\n        <div className={styles.topBar}>\n            <div\n                className={clsx(\n                    navbarStyles.navBrandContainer,\n                    navbarStyles.navBrandContainerCompressed,\n                    navbarStyles.navBrandContainerResponsive\n                )}\n                data-id=\"drawer-brand-container\"\n            >\n                {!hideNavBranding && renderBrand()}\n            </div>\n            <ClickableIcon\n                className={styles.closeButton}\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CrossIcon className={styles.closeIcon} />\n            </ClickableIcon>\n        </div>\n    );\n\n    return (\n        <FloatingFocusManager\n            context={context}\n            initialFocus={-1}\n            returnFocus={true}\n            disabled={!show}\n        >\n            <div\n                className={styles.wrapper}\n                ref={mergeRefs(ref, floatingRefs.setFloating)}\n                data-testid=\"drawer\"\n            >\n                <nav\n                    ref={containerRef}\n                    className={clsx(\n                        styles.container,\n                        show ? styles.containerShown : styles.containerHidden\n                    )}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={-1}\n                    aria-label={drawerLabel}\n                >\n                    <div className={styles.content}>\n                        {renderTopBar()}\n                        {children}\n                    </div>\n                </nav>\n            </div>\n        </FloatingFocusManager>\n    );\n};\n\nexport const Drawer = React.forwardRef(Component);\n"],"names":["Drawer","React","forwardRef","props","ref","show","resources","children","hideNavBranding","onClose","onBrandClick","drawerLabel","mobileMenuRef","viewHeight","setViewHeight","useState","containerRef","useRef","useApplyStyle","styles.tokens","container","primary","secondary","context","refs","floatingRefs","useFloating","open","onOpenChange","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","FloatingFocusManager","initialFocus","returnFocus","disabled","className","styles.wrapper","mergeRefs","setFloating","clsx","styles.container","styles.containerShown","styles.containerHidden","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","styles.content","styles.topBar","navbarStyles.navBrandContainer","navbarStyles.navBrandContainerCompressed","navbarStyles.navBrandContainerResponsive","_Fragment","Brand","compress","onClick","type","navbarStyles.navSeparator","navbarStyles.navSeparatorCompressed","navbarStyles.navSeparatorResponsive","ClickableIcon","styles.closeButton","focusHighlight","CrossIcon","styles.closeIcon"],"mappings":"uzCAaA,MA0LaA,EAASC,EAAMC,YA1LV,CACdC,EACAC,KAKA,MAAMC,KACFA,EAAIC,UACJA,EAAY,CAAA,EAAEC,SACdA,EAAQC,gBACRA,EAAeC,QACfA,EAAOC,aACPA,EAAYC,YACZA,EAAc,yBAAwBC,cACtCA,GACAT,GACGU,EAAYC,GAAiBC,EAAiB,GAC/CC,EAAeC,EAAuB,MAE5CC,EAAcF,EAAc,CACxB,CAACG,EAAcC,UAAUP,YAAaA,EAChC,GAAGA,MACH,OAGV,MAAMQ,QAAEA,EAAOC,UAAEA,GAAchB,GAKzBiB,QAAEA,EAASC,KAAMC,GAAiBC,EAAY,CAChDC,KAAMtB,EACNuB,aAAeD,KACNA,GAAQlB,GACTA,GACJ,IAOFoB,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMjB,EAAkC,IAArBiB,OAAOC,YAC1BjB,EAAcD,EAClB,GAmBJmB,GAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,GAAgB,KACZ,GAAI9B,EAAM,CACN,MAAM+B,EAAQC,YAAW,KACjBrB,EAAasB,SACbtB,EAAasB,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAAC/B,IAgEJ,OACIqC,EAACC,EAAoB,CACjBpB,QAASA,EACTqB,gBACAC,aAAa,EACbC,UAAWzC,EAAIE,SAEfmC,EAAA,MAAA,CACIK,UAAWC,EACX5C,IAAK6C,EAAU7C,EAAKqB,EAAayB,aAAY,cACjC,kBAEZR,EAAA,MAAA,CACItC,IAAKY,EACL+B,UAAWI,EACPC,EACA/C,EAAOgD,EAAwBC,GAEnCC,UAtHOC,IACdnD,GAEa,WAAdmD,EAAMC,MACND,EAAME,iBACNjD,SAAAA,IAEA4B,YAAW,WACe,QAAtBsB,EAAA/C,aAAa,EAAbA,EAAe0B,eAAO,IAAAqB,GAAAA,EAAEpB,OAAO,GAChC,KACP,EA6GYqB,UAAU,EAAE,aACAjD,EAAWJ,SAEvBsD,EAAA,MAAA,CAAKd,UAAWe,EAAcvD,SAAA,CA5C1CsD,EAAA,MAAA,CAAKd,UAAWgB,EAAaxD,SAAA,CACzBmC,SACIK,UAAWI,EACPa,EACAC,EACAC,GACH,UACO,mCAEN1D,GA5CNqD,EAAAM,EAAA,CAAA5D,SAAA,CACKc,GACGqB,EAAC0B,EAAK,CACF9D,UAAWe,EACXgD,UAAQ,EACRC,QAAS5D,EAAY,UACb,uBAAsB,cAClB,gBACZ6D,KAAK,YAGZjD,GACGuC,EAAAM,EAAA,CAAA5D,SAAA,CACImC,EAAA,MAAA,CACIK,UAAWI,EACPqB,EACAC,EACAC,KAGRhC,EAAC0B,EAAK,CACF9D,UAAWgB,EACX+C,UAAQ,EACRC,QAAS5D,EAAY,UACb,uCACI,0BACZ6D,KAAK,sBAoBrB7B,EAACiC,EAAa,CACV5B,UAAW6B,EACXN,QAAS7D,EACToE,gBAAgB,EAAK,aACV,iBAAgBtE,SAE3BmC,EAACoC,EAAS,CAAC/B,UAAWgC,SA6BbxE,UAIM"}

package/navbar/drawer.styles_7hnxp5.css

@@ -1,8 +1,8 @@
-.w13l2hkd{display:none;}:where(body.fds-breakpoint-lg-max) .w13l2hkd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+@layer fds{.w13l2hkd{display:none;}:where(body.fds-breakpoint-lg-max) .w13l2hkd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .c1dn2jn3{position:absolute;overflow-y:auto;overflow-x:hidden;display:block;padding:0 0 var(--fds-spacing-16);background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-subtle);outline:none;--fds-internal-navbar-drawer-viewHeight:initial;height:calc(var(--fds-internal-navbar-drawer-viewHeight, 1vh) * 100);}:where(body.fds-breakpoint-lg-max) .c1dn2jn3{width:75%;}:where(body.fds-breakpoint-sm-max) .c1dn2jn3{width:100%;}
 .cc2efvs{visibility:visible;right:0;-webkit-transition:all 300ms var(--fds-motion-timing-ease-entrance);transition:all 300ms var(--fds-motion-timing-ease-entrance);transition-delay:200ms;}
 .c9clmba{visibility:hidden;right:-100%;-webkit-transition:all 300ms var(--fds-motion-timing-ease-exit);transition:all 300ms var(--fds-motion-timing-ease-exit);}
 .c1yr3tbf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .tkfa6sy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;padding:var(--fds-spacing-40) var(--fds-spacing-20) var(--fds-spacing-32);}
 .csth4gk{height:1.5rem;width:1.5rem;}
-.c4lb5hz{position:absolute;right:calc(var(--fds-spacing-4) * -1);color:var(--fds-colour-icon);}.c4lb5hz:active,.c4lb5hz:focus{color:var(--fds-colour-icon-hover);}.c4lb5hz svg{height:1.5rem;width:1.5rem;}
+.c4lb5hz{position:absolute;right:calc(var(--fds-spacing-4) * -1);color:var(--fds-colour-icon);}.c4lb5hz:active,.c4lb5hz:focus{color:var(--fds-colour-icon-hover);}.c4lb5hz svg{height:1.5rem;width:1.5rem;}}

package/navbar/menu.styles_gdpqc.css

@@ -1,3 +1,3 @@
-.m1lq4qov{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0;padding:0;border-left:var(--fds-border-width-040) solid var(--fds-colour-border-selected);}
+@layer fds{.m1lq4qov{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0;padding:0;border-left:var(--fds-border-width-040) solid var(--fds-colour-border-selected);}
 .m6cy0t7{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.l1t9jy07{width:100%;text-align:left;color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-12) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l1t9jy07:hover,.l1t9jy07:active,.l1t9jy07:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}
+.l1t9jy07{width:100%;text-align:left;color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-12) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l1t9jy07:hover,.l1t9jy07:active,.l1t9jy07:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}}

package/navbar/navbar-action-buttons.styles_1vpm0nk.css

@@ -1,4 +1,4 @@
-.w62j500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin-left:var(--fds-spacing-64);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-lg-max) .w62j500{display:none;}
+@layer fds{.w62j500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin-left:var(--fds-spacing-64);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-lg-max) .w62j500{display:none;}
 .m1gsi5dr{display:none;}:where(body.fds-breakpoint-lg-max) .m1gsi5dr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin-left:var(--fds-spacing-64);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .d2uo9g4{display:none;list-style:none;}:where(body.fds-breakpoint-lg-max) .d2uo9g4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--fds-spacing-40);width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:22rem;max-width:24rem;}:where(body.fds-breakpoint-sm-max) .d2uo9g4{width:100%;max-width:unset;min-width:unset;}
 .bmx9nfs{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.bmx9nfs:not(:last-of-type){margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-lg-max) .bmx9nfs{width:100%;padding:0 0 0 var(--fds-spacing-16);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-lg-max) .bmx9nfs:not(:last-of-type){margin-right:0;margin-bottom:0;}
@@ -7,4 +7,4 @@
 .dvtt0j5{display:none;}:where(body.fds-breakpoint-lg-max) .dvtt0j5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--fds-spacing-40);}
 .dq81je7{margin-bottom:var(--fds-spacing-8);}
 .d1s552j0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.dbo95jy:not(:last-child){margin-right:var(--fds-spacing-16);}.dbo95jy img{width:auto;height:auto;object-fit:contain;}:where(body.fds-breakpoint-lg-max) .dbo95jy img{max-width:11rem;}:where(body.fds-breakpoint-sm-max) .dbo95jy img{max-width:100%;}
+.dbo95jy:not(:last-child){margin-right:var(--fds-spacing-16);}.dbo95jy img{width:auto;height:auto;object-fit:contain;}:where(body.fds-breakpoint-lg-max) .dbo95jy img{max-width:11rem;}:where(body.fds-breakpoint-sm-max) .dbo95jy img{max-width:100%;}}

package/navbar/navbar-items.styles_1i3ltot.css

@@ -1,4 +1,4 @@
-.w1ndf2sj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;position:relative;}:where(body.fds-breakpoint-lg-max) .w1ndf2sj{display:none;}
+@layer fds{.w1ndf2sj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;position:relative;}:where(body.fds-breakpoint-lg-max) .w1ndf2sj{display:none;}
 .w177nfye{margin-right:auto;}
 .mw9gug8{display:none;list-style:none;}:where(body.fds-breakpoint-lg-max) .mw9gug8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;}
 .l18t6f3m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 1rem;}.l18t6f3m:first-child{margin-left:0;}:where(body.fds-breakpoint-lg-max) .l18t6f3m{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0.125rem 0;width:100%;margin-left:0rem;}
@@ -16,4 +16,4 @@
 .ej7h5do{padding:0.5rem;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;margin:auto 0.25rem auto 0;}
 .e160mxwv{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
 .c1s8ur0k{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon);}.l1o3p4yu:active .c1s8ur0k,.l1o3p4yu:hover .c1s8ur0k,.l1o3p4yu:focus .c1s8ur0k{color:var(--fds-colour-icon-hover);}
-.l1o3p4yu:active .c178e7hk,.l1o3p4yu:hover .c178e7hk,.l1o3p4yu:focus .c178e7hk{color:var(--fds-colour-icon-selected-hover);}
+.l1o3p4yu:active .c178e7hk,.l1o3p4yu:hover .c178e7hk,.l1o3p4yu:focus .c178e7hk{color:var(--fds-colour-icon-selected-hover);}}

package/navbar/navbar.d.ts

@@ -1,3 +1,10 @@
 import type React from "react";
 import type { NavbarDrawerHandle, NavbarProps } from "./types";
+/**
+ * The main site navigation bar with desktop and mobile drawer views.
+ *
+ * Use `Navbar` to render the primary navigation header. It displays brand
+ * logos, navigation items, and action buttons in a desktop bar, and
+ * automatically collapses items into a slide-in drawer for mobile viewports.
+ */
 export declare const Navbar: <T>(props: NavbarProps<T> & React.RefAttributes<NavbarDrawerHandle>) => React.ReactElement | null;

package/navbar/navbar.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t,Fragment as r}from"react/jsx-runtime";import{MenuIcon as o}from"@lifesg/react-icons/menu";import a from"clsx";import{forwardRef as n,useState as s,useRef as l,useContext as d,useImperativeHandle as m,useEffect as c}from"react";import{Layout as p}from"../layout/index.js";import{Masthead as u}from"../masthead/masthead.js";import{Overlay as h}from"../overlay/overlay.js";import{ClickableIcon as v}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as k}from"../theme/utils/css-variable.js";import{ThemeContext as b}from"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as f}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useResolvedBreakpointToken as j}from"../theme/utils/use-media-query.js";import{Brand as y}from"./brand.js";import{Drawer as C}from"./drawer.js";import{wrapper as w,wrapperFixed as g,wrapperRelative as N,wrapperDark as B,wrapperLight as x,navElementsContainer as I,navElementsContainerWithBranding as L,nav as _,navCompressed as E,navDark as D,navSeparator as O,navSeparatorCompressed as A,navSeparatorFull as M,navSeparatorResponsive as q,navBrandContainer as z,navBrandContainerCompressed as H,navBrandContainerFull as R,navBrandContainerResponsive as T,mobileMenuButton as W,mobileMenuIcon as F}from"./navbar.styles.js";import{NavbarActionButtons as G}from"./navbar-action-buttons.js";import{NavbarHelper as J}from"./navbar-helper.js";import{NavbarItems as K}from"./navbar-items.js";import{getDefaultResourceLogo as P}from"./navbar-logo-data.js";const Q=n(((n,Q)=>{var{items:S,className:U,id:V,selectedId:X,compress:Y=!1,fixed:Z=!0,resources:$,hideNavElements:ee=!1,hideNavBranding:ie=!1,hideLinkIndicator:te=!1,drawerDismissalExclusions:re=[],actionButtons:oe,onItemClick:ae,onActionButtonClick:ne,onBrandClick:se,masthead:le=!0,layout:de="default",headerLabel:me="Main navigation menu",drawerLabel:ce}=n,pe=e(n,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[ue,he]=s(!1),[ve,ke]=s(!1),be=l(null),fe="stretch"===de,je=l(null),ye=d(b),Ce=P(null==ye?void 0:ye.theme),we=k(j(f["lg-max"])),ge=(null==$?void 0:$.primary)||Ce.primary,Ne=null==$?void 0:$.secondary;m(Q,(()=>Object.assign(je.current,{dismissDrawer:()=>{Be()}})),[ue]),c((()=>(Ie(),window.addEventListener("resize",Ie),()=>{window.removeEventListener("resize",Ie)})),[]);const Be=()=>{he(!1),setTimeout((()=>{ke(!1)}),550)},xe=e=>ue&&-1===re.indexOf(e),Ie=()=>{window.innerWidth<=we&&ue&&Be()},Le=(e,i)=>{se&&se(i),xe("brand-click")&&Be()},_e=(e,i)=>{J.isNavItemCommon(i)&&i.onClick?i.onClick(e):ae&&(e.preventDefault(),ae(i)),J.isNavItemLink(i)&&!i.subMenu&&xe("item-click")&&Be()},Ee=(e,i)=>{var t;"button"!==i.type&&"download"!==i.type||!(null===(t=i.args)||void 0===t?void 0:t.onClick)?ne&&(e.preventDefault(),ne(i)):i.args.onClick(e),xe("item-click")&&Be()},De=()=>{he(!0),ke(!0)},Oe=()=>{xe("close-button-click")&&Be()},Ae=()=>{const e=S.mobile||S.desktop;return e&&e.length>0||oe&&(e=>{const i=e.mobile||e.desktop;return!!i&&i.length&&i.some((e=>!e.uncollapsible))})(oe)?t(v,{ref:be,className:W,"aria-label":ue?"Close nav menu":"Open nav menu","aria-expanded":ue,"data-testid":"button__mobile-menu",onClick:De,focusHighlight:!1,children:t(o,{className:F})}):null};return i("div",{ref:je,className:a(w,Z?g:N,"dark"===(null==ye?void 0:ye.mode)?B:x,U),id:V||"navbar-wrapper","data-testid":pe["data-testid"]||"navbar-wrapper",children:[le&&t(u,{stretch:fe}),i(p.Content,{stretch:fe,children:[i("nav",{className:a(_,Y&&E,"dark"===(null==ye?void 0:ye.mode)&&D),"aria-label":me,children:[!ie&&i("div",{className:a(z,Y?H:R,T),"data-id":"brand-container",children:[ge&&t(y,{resources:ge,onClick:Le,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),Ne&&i(r,{children:[t("div",{className:a(O,Y?A:M,q)}),t(y,{resources:Ne,onClick:Le,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!ee&&i("div",{className:a(I,!ie&&L),children:[t(K,{items:S.desktop,onItemClick:_e,selectedId:X,hideNavBranding:ie,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:Ee}),Ae()]})]}),!ee&&t(h,{show:ve,enableOverlayClick:!0,onOverlayClick:Oe,children:i(C,{show:ue,resources:{primary:ge,secondary:Ne},onClose:Oe,onBrandClick:Le,actionButtons:oe,hideNavBranding:ie,mobileMenuRef:be,drawerLabel:ce,children:[t(K,{items:S.mobile||S.desktop,onItemClick:_e,selectedId:X,mobile:!0,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:Ee,mobile:!0})]})})]})]})}));export{Q as Navbar};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t,Fragment as r}from"react/jsx-runtime";import{MenuIcon as o}from"@lifesg/react-icons/menu";import a from"clsx";import{forwardRef as n,useState as s,useRef as l,useContext as d,useImperativeHandle as m,useEffect as c}from"react";import{Layout as p}from"../layout/index.js";import{Masthead as u}from"../masthead/masthead.js";import{Overlay as h}from"../overlay/overlay.js";import{ClickableIcon as v}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as k}from"../theme/utils/css-variable.js";import{ThemeContext as b}from"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as f}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useResolvedBreakpointToken as j}from"../theme/utils/use-media-query.js";import{Brand as y}from"./brand.js";import{Drawer as C}from"./drawer.js";import{wrapper as w,wrapperFixed as g,wrapperRelative as N,wrapperDark as B,wrapperLight as x,navElementsContainer as I,navElementsContainerWithBranding as L,nav as _,navCompressed as E,navDark as D,navSeparator as O,navSeparatorCompressed as A,navSeparatorFull as M,navSeparatorResponsive as q,navBrandContainer as z,navBrandContainerCompressed as H,navBrandContainerFull as R,navBrandContainerResponsive as T,mobileMenuButton as W,mobileMenuIcon as F}from"./navbar.styles.js";import{NavbarActionButtons as G}from"./navbar-action-buttons.js";import{NavbarHelper as J}from"./navbar-helper.js";import{NavbarItems as K}from"./navbar-items.js";import{getDefaultResourceLogo as P}from"./navbar-logo-data.js";const Q=n(((n,Q)=>{var{items:S,className:U,id:V,selectedId:X,compress:Y=!1,fixed:Z=!0,resources:$,hideNavElements:ee=!1,hideNavBranding:ie=!1,hideLinkIndicator:te=!1,drawerDismissalExclusions:re=[],actionButtons:oe,onItemClick:ae,onActionButtonClick:ne,onBrandClick:se,masthead:le=!0,layout:de="default",headerLabel:me="Main navigation menu",drawerLabel:ce}=n,pe=e(n,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[ue,he]=s(!1),[ve,ke]=s(!1),be=l(null),fe="stretch"===de,je=l(null),ye=d(b),Ce=P(null==ye?void 0:ye.theme),we=k(j(f["lg-max"])),ge=(null==$?void 0:$.primary)||Ce.primary,Ne=null==$?void 0:$.secondary;m(Q,(()=>Object.assign(je.current,{dismissDrawer:()=>{Be()}})),[ue]),c((()=>(Ie(),window.addEventListener("resize",Ie),()=>{window.removeEventListener("resize",Ie)})),[]);const Be=()=>{he(!1),setTimeout((()=>{ke(!1)}),550)},xe=e=>ue&&-1===re.indexOf(e),Ie=()=>{window.innerWidth<=we&&ue&&Be()},Le=(e,i)=>{se&&se(i),xe("brand-click")&&Be()},_e=(e,i)=>{J.isNavItemCommon(i)&&i.onClick?i.onClick(e):ae&&(e.preventDefault(),ae(i)),J.isNavItemLink(i)&&!i.subMenu&&xe("item-click")&&Be()},Ee=(e,i)=>{var t;"button"!==i.type&&"download"!==i.type||!(null===(t=i.args)||void 0===t?void 0:t.onClick)?ne&&(e.preventDefault(),ne(i)):i.args.onClick(e),xe("item-click")&&Be()},De=()=>{he(!0),ke(!0)},Oe=()=>{xe("close-button-click")&&Be()},Ae=()=>{const e=S.mobile||S.desktop;return e&&e.length>0||oe&&(e=>{const i=e.mobile||e.desktop;return!!i&&i.length&&i.some((e=>!e.uncollapsible))})(oe)?t(v,{ref:be,className:W,"aria-label":ue?"Close nav menu":"Open nav menu","aria-expanded":ue,"data-testid":"button__mobile-menu",onClick:De,focusHighlight:!0,children:t(o,{className:F})}):null};return i("div",{ref:je,className:a(w,Z?g:N,"dark"===(null==ye?void 0:ye.mode)?B:x,U),id:V||"navbar-wrapper","data-testid":pe["data-testid"]||"navbar-wrapper",children:[le&&t(u,{stretch:fe}),i(p.Content,{stretch:fe,children:[i("nav",{className:a(_,Y&&E,"dark"===(null==ye?void 0:ye.mode)&&D),"aria-label":me,children:[!ie&&i("div",{className:a(z,Y?H:R,T),"data-id":"brand-container",children:[ge&&t(y,{resources:ge,onClick:Le,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),Ne&&i(r,{children:[t("div",{className:a(O,Y?A:M,q)}),t(y,{resources:Ne,onClick:Le,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!ee&&i("div",{className:a(I,!ie&&L),children:[t(K,{items:S.desktop,onItemClick:_e,selectedId:X,hideNavBranding:ie,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:Ee}),Ae()]})]}),!ee&&t(h,{show:ve,enableOverlayClick:!0,onOverlayClick:Oe,children:i(C,{show:ue,resources:{primary:ge,secondary:Ne},onClose:Oe,onBrandClick:Le,actionButtons:oe,hideNavBranding:ie,mobileMenuRef:be,drawerLabel:ce,children:[t(K,{items:S.mobile||S.desktop,onItemClick:_e,selectedId:X,mobile:!0,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:Ee,mobile:!0})]})})]})]})}));export{Q as Navbar};
 //# sourceMappingURL=navbar.js.map