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

package/modal-v2/slots/slot-styles.d.ts

@@ -1,10 +1,18 @@
-export declare const ModalCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CloseButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledClickableIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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 ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FooterContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-interface SlotSpacerStyleProps {
-    $hasCloseButton?: boolean;
-}
-export declare const SlotSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SlotSpacerStyleProps>> & string;
-export {};
+export declare const slotSpacerHasCloseButtonAttribute = "data-has-close-button";
+export declare const slotSpacerTokens: {
+    readonly firstChildMarginTopWithCloseButton: "--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton";
+    readonly firstChildMarginTopNoCloseButton: "--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton";
+    readonly contentLastChildMarginBottom: "--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom";
+    readonly footerNotFirstChildMarginTop: "--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop";
+    readonly footerLastChildMarginBottom: "--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom";
+};
+export declare const modalCard: import("@linaria/core").LinariaClassName;
+export declare const closeButtonContainer: import("@linaria/core").LinariaClassName;
+export declare const styledClickableIcon: import("@linaria/core").LinariaClassName;
+export declare const contentContainer: import("@linaria/core").LinariaClassName;
+export declare const footerContainer: import("@linaria/core").LinariaClassName;
+export declare const slotSpacer: import("@linaria/core").LinariaClassName;
+export declare const headerContainer: import("@linaria/core").LinariaClassName;
+export declare const headerTitle: import("@linaria/core").LinariaClassName;
+export declare const headerCloseButton: import("@linaria/core").LinariaClassName;
+export declare const headerSpacer: import("@linaria/core").LinariaClassName;

package/modal-v2/slots/slot-styles.js

@@ -1,103 +1,2 @@
-import i,{css as a}from"styled-components";import{ClickableIcon as r}from"../../shared/clickable-icon/clickable-icon.js";import{V3_Spacing as t,V3_Colour as n,V3_Shadow as g,V3_Radius as m,V3_Breakpoint as c,V3_MediaQuery as s}from"../../v3_theme/index.js";const e=i.div`
-    width: 40rem;
-    margin: ${t["spacing-64"]} auto;
-    background: ${n.bg};
-    box-shadow: ${g["xs-strong"]};
-    border-radius: ${m.lg};
-
-    display: flex;
-    flex-direction: column-reverse;
-
-    max-width: calc(100% - ${c["xxl-margin"]}px * 2);
-
-    ${s.MaxWidth.xl} {
-        max-width: calc(100% - ${c["xl-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.lg} {
-        max-width: calc(100% - ${c["lg-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.md} {
-        max-width: calc(100% - ${c["md-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.sm} {
-        max-width: calc(100% - ${c["sm-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xs} {
-        max-width: calc(100% - ${c["xs-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xxs} {
-        max-width: calc(100% - ${c["xxs-margin"]}px * 2);
-    }
-`,d=i.div`
-    margin-right: ${t["spacing-16"]};
-    margin-left: auto;
-    margin-top: ${t["spacing-16"]};
-    margin-bottom: ${t["spacing-16"]};
-`,$=i(r)`
-    padding: 0;
-    color: ${n.icon};
-
-    svg {
-        height: 2rem;
-        width: 2rem;
-    }
-`,o=i.div`
-    margin-right: ${t["spacing-64"]};
-    margin-left: ${t["spacing-64"]};
-
-    ${s.MaxWidth.sm} {
-        margin-right: ${t["spacing-20"]};
-        margin-left: ${t["spacing-20"]};
-    }
-`,l=i.div`
-    margin-right: ${t["spacing-64"]};
-    margin-left: ${t["spacing-64"]};
-
-    ${s.MaxWidth.sm} {
-        margin-right: ${t["spacing-20"]};
-        margin-left: ${t["spacing-20"]};
-    }
-
-    display: flex;
-    flex-direction: row-reverse; /* primary button on right */
-    column-gap: ${t["spacing-32"]};
-    row-gap: ${t["spacing-16"]};
-
-    & > button {
-        flex: 1;
-    }
-
-    ${s.MaxWidth.md} {
-        flex-direction: column;
-    }
-`,h=i.div`
-    :where(& > ${o}:last-child) {
-        margin-bottom: ${t["spacing-64"]};
-    }
-
-    :where(& > ${l}:not(:first-child)) {
-        margin-top: ${t["spacing-32"]};
-    }
-
-    :where(& > ${l}:last-child) {
-        margin-bottom: ${t["spacing-64"]};
-    }
-
-    ${i=>i.$hasCloseButton?a`
-                  :where(& > ${o}:first-child),
-                  :where(& > ${l}:first-child) {
-                      margin-top: 0;
-                  }
-              `:a`
-                  :where(& > ${o}:first-child),
-                  :where(& > ${l}:first-child) {
-                      margin-top: ${t["spacing-64"]};
-                  }
-              `}
-`;export{d as CloseButtonContainer,o as ContentContainer,l as FooterContainer,e as ModalCard,h as SlotSpacer,$ as StyledClickableIcon};
+import"./slot-styles_10ut1v7.css";const s="metykyj",t="c1247joo",o="st53q25",h="c1ls09wh",l="f1s12qxk",a="s1vsayl1",m="h1adf5mq",c="hii7rdr",i="ha88pah",r="h3mtfiz";export{t as closeButtonContainer,h as contentContainer,l as footerContainer,i as headerCloseButton,m as headerContainer,r as headerSpacer,c as headerTitle,s as modalCard,a as slotSpacer,o as styledClickableIcon};
 //# sourceMappingURL=slot-styles.js.map

package/modal-v2/slots/slot-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot-styles.js","sources":["../../../src/modal-v2/slots/slot-styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../../shared/clickable-icon\";\nimport {\n    V3_Breakpoint,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// Card\n// =============================================================================\nexport const ModalCard = styled.div`\n    width: 40rem;\n    margin: ${V3_Spacing[\"spacing-64\"]} auto;\n    background: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"xs-strong\"]};\n    border-radius: ${V3_Radius[\"lg\"]};\n\n    display: flex;\n    flex-direction: column-reverse;\n\n    max-width: calc(100% - ${V3_Breakpoint[\"xxl-margin\"]}px * 2);\n\n    ${V3_MediaQuery.MaxWidth.xl} {\n        max-width: calc(100% - ${V3_Breakpoint[\"xl-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        max-width: calc(100% - ${V3_Breakpoint[\"lg-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        max-width: calc(100% - ${V3_Breakpoint[\"md-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        max-width: calc(100% - ${V3_Breakpoint[\"sm-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        max-width: calc(100% - ${V3_Breakpoint[\"xs-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        max-width: calc(100% - ${V3_Breakpoint[\"xxs-margin\"]}px * 2);\n    }\n`;\n\n// =============================================================================\n// Header\n// =============================================================================\nexport const CloseButtonContainer = styled.div`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    margin-left: auto;\n    margin-top: ${V3_Spacing[\"spacing-16\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const StyledClickableIcon = styled(ClickableIcon)`\n    padding: 0;\n    color: ${V3_Colour.icon};\n\n    svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\n// =============================================================================\n// Content\n// =============================================================================\nexport const ContentContainer = styled.div`\n    margin-right: ${V3_Spacing[\"spacing-64\"]};\n    margin-left: ${V3_Spacing[\"spacing-64\"]};\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin-right: ${V3_Spacing[\"spacing-20\"]};\n        margin-left: ${V3_Spacing[\"spacing-20\"]};\n    }\n`;\n\n// =============================================================================\n// Footer\n// =============================================================================\nexport const FooterContainer = styled.div`\n    margin-right: ${V3_Spacing[\"spacing-64\"]};\n    margin-left: ${V3_Spacing[\"spacing-64\"]};\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin-right: ${V3_Spacing[\"spacing-20\"]};\n        margin-left: ${V3_Spacing[\"spacing-20\"]};\n    }\n\n    display: flex;\n    flex-direction: row-reverse; /* primary button on right */\n    column-gap: ${V3_Spacing[\"spacing-32\"]};\n    row-gap: ${V3_Spacing[\"spacing-16\"]};\n\n    & > button {\n        flex: 1;\n    }\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\n// =============================================================================\n// Spacer\n// =============================================================================\ninterface SlotSpacerStyleProps {\n    $hasCloseButton?: boolean;\n}\n\nexport const SlotSpacer = styled.div<SlotSpacerStyleProps>`\n    :where(& > ${ContentContainer}:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-64\"]};\n    }\n\n    :where(& > ${FooterContainer}:not(:first-child)) {\n        margin-top: ${V3_Spacing[\"spacing-32\"]};\n    }\n\n    :where(& > ${FooterContainer}:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-64\"]};\n    }\n\n    ${(props) =>\n        props.$hasCloseButton\n            ? css`\n                  :where(& > ${ContentContainer}:first-child),\n                  :where(& > ${FooterContainer}:first-child) {\n                      margin-top: 0;\n                  }\n              `\n            : css`\n                  :where(& > ${ContentContainer}:first-child),\n                  :where(& > ${FooterContainer}:first-child) {\n                      margin-top: ${V3_Spacing[\"spacing-64\"]};\n                  }\n              `}\n`;\n"],"names":["ModalCard","styled","div","V3_Spacing","V3_Colour","bg","V3_Shadow","V3_Radius","V3_Breakpoint","V3_MediaQuery","MaxWidth","xl","lg","md","sm","xs","xxs","CloseButtonContainer","StyledClickableIcon","ClickableIcon","icon","ContentContainer","FooterContainer","SlotSpacer","props","$hasCloseButton","css"],"mappings":"iQAeO,MAAMA,EAAYC,EAAOC,GAAG;;cAErBC,EAAW;kBACPC,EAAUC;kBACVC,EAAU;qBACPC,EAAc;;;;;6BAKNC,EAAc;;MAErCC,EAAcC,SAASC;iCACIH,EAAc;;;MAGzCC,EAAcC,SAASE;iCACIJ,EAAc;;;MAGzCC,EAAcC,SAASG;iCACIL,EAAc;;;MAGzCC,EAAcC,SAASI;iCACIN,EAAc;;;MAGzCC,EAAcC,SAASK;iCACIP,EAAc;;;MAGzCC,EAAcC,SAASM;iCACIR,EAAc;;EAOlCS,EAAuBhB,EAAOC,GAAG;oBAC1BC,EAAW;;kBAEbA,EAAW;qBACRA,EAAW;EAGnBe,EAAsBjB,EAAOkB,EAAc;;aAE3Cf,EAAUgB;;;;;;EAWVC,EAAmBpB,EAAOC,GAAG;oBACtBC,EAAW;mBACZA,EAAW;;MAExBM,EAAcC,SAASI;wBACLX,EAAW;uBACZA,EAAW;;EAOrBmB,EAAkBrB,EAAOC,GAAG;oBACrBC,EAAW;mBACZA,EAAW;;MAExBM,EAAcC,SAASI;wBACLX,EAAW;uBACZA,EAAW;;;;;kBAKhBA,EAAW;eACdA,EAAW;;;;;;MAMpBM,EAAcC,SAASG;;;EAYhBU,EAAatB,EAAOC,GAAyB;iBACzCmB;yBACQlB,EAAW;;;iBAGnBmB;sBACKnB,EAAW;;;iBAGhBmB;yBACQnB,EAAW;;;MAG7BqB,GACCA,EAAMC,gBACAC,CAAG;+BACcL;+BACAC;;;gBAIjBI,CAAG;+BACcL;+BACAC;oCACKnB,EAAW;;;"}
+{"version":3,"file":"slot-styles.js","sources":["../../../src/modal-v2/slots/slot-styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\n// =============================================================================\n// Tokens and attributes\n// =============================================================================\nexport const slotSpacerHasCloseButtonAttribute = \"data-has-close-button\";\nconst internalSlotSpacerTokens = {\n    firstChildMarginTop:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTop\",\n} as const;\n\nexport const slotSpacerTokens = {\n    firstChildMarginTopWithCloseButton:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton\",\n    firstChildMarginTopNoCloseButton:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton\",\n\n    contentLastChildMarginBottom:\n        \"--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom\",\n\n    footerNotFirstChildMarginTop:\n        \"--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop\",\n    footerLastChildMarginBottom:\n        \"--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom\",\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const modalCard = css`\n    width: 40rem;\n    margin: ${Spacing[\"spacing-64\"]} auto;\n    background: ${Colour.bg};\n    box-shadow: ${Shadow[\"xs-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n\n    display: flex;\n    flex-direction: column-reverse;\n\n    max-width: calc(100% - ${Breakpoint[\"xxl-margin\"]} * 2);\n\n    ${MediaQuery.MaxWidth.xl} {\n        max-width: calc(100% - ${Breakpoint[\"xl-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        max-width: calc(100% - ${Breakpoint[\"lg-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        max-width: calc(100% - ${Breakpoint[\"md-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: calc(100% - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        max-width: calc(100% - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        max-width: calc(100% - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const closeButtonContainer = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    margin-left: auto;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const styledClickableIcon = css`\n    padding: 0;\n    color: ${Colour.icon};\n\n    & svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const contentContainer = css`\n    margin-right: ${Spacing[\"spacing-64\"]};\n    margin-left: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-20\"]};\n        margin-left: ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const footerContainer = css`\n    margin-right: ${Spacing[\"spacing-64\"]};\n    margin-left: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-20\"]};\n        margin-left: ${Spacing[\"spacing-20\"]};\n    }\n\n    display: flex;\n    flex-direction: row-reverse; /* primary button on right */\n    column-gap: ${Spacing[\"spacing-32\"]};\n    row-gap: ${Spacing[\"spacing-16\"]};\n\n    & > button {\n        flex: 1;\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\nexport const slotSpacer = css`\n    ${slotSpacerTokens.contentLastChildMarginBottom}: initial;\n    ${slotSpacerTokens.footerNotFirstChildMarginTop}: initial;\n    ${slotSpacerTokens.footerLastChildMarginBottom}: initial;\n    ${slotSpacerTokens.firstChildMarginTopWithCloseButton}: initial;\n    ${slotSpacerTokens.firstChildMarginTopNoCloseButton}: initial;\n\n    ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n        ${slotSpacerTokens.firstChildMarginTopNoCloseButton},\n        ${Spacing[\"spacing-64\"]}\n    );\n\n    & > :where(.${contentContainer}:last-child) {\n        margin-bottom: var(\n            ${slotSpacerTokens.contentLastChildMarginBottom},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n\n    & > :where(.${footerContainer}:not(:first-child)) {\n        margin-top: var(\n            ${slotSpacerTokens.footerNotFirstChildMarginTop},\n            ${Spacing[\"spacing-32\"]}\n        );\n    }\n\n    & > :where(.${footerContainer}:last-child) {\n        margin-bottom: var(\n            ${slotSpacerTokens.footerLastChildMarginBottom},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n\n    &\n        > :where(\n            .${contentContainer}:first-child, .${footerContainer}:first-child\n        ) {\n        margin-top: var(${internalSlotSpacerTokens.firstChildMarginTop});\n    }\n\n    &[${slotSpacerHasCloseButtonAttribute}=\"true\"] {\n        ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n            ${slotSpacerTokens.firstChildMarginTopWithCloseButton},\n            0\n        );\n    }\n\n    &[${slotSpacerHasCloseButtonAttribute}=\"false\"] {\n        ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n            ${slotSpacerTokens.firstChildMarginTopNoCloseButton},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n`;\n\nexport const headerContainer = css`\n    display: flex;\n    align-items: center;\n    padding: ${Spacing[\"spacing-16\"]};\n\n    &[data-close-button-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const headerTitle = css`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour.text};\n    flex: 1;\n    text-align: center;\n`;\n\nexport const headerCloseButton = css`\n    padding: 0;\n    color: ${Colour.icon};\n    flex-shrink: 0;\n\n    & svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const headerSpacer = css`\n    width: 2rem;\n    flex-shrink: 0;\n`;\n"],"names":["modalCard","closeButtonContainer","styledClickableIcon","contentContainer","footerContainer","slotSpacer","headerContainer","headerTitle","headerCloseButton","headerSpacer"],"mappings":"gEAuCO,MAAMA,EAAS,UAqCTC,EAAoB,WAOpBC,EAAmB,UAUnBC,EAAgB,WAUhBC,EAAe,WAuBfC,EAAU,WAuDVC,EAAe,WAUfC,EAAW,UAOXC,EAAiB,UAWjBC,EAAY"}

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

@@ -0,0 +1,30 @@
+@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);}
+.f1s12qxk{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-column-gap:var(--fds-spacing-32);column-gap:var(--fds-spacing-32);row-gap:var(--fds-spacing-16);}:where(body.fds-breakpoint-sm-max) .f1s12qxk{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}.f1s12qxk>button{-webkit-flex:1;-ms-flex:1;flex:1;}:where(body.fds-breakpoint-md-max) .f1s12qxk{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.s1vsayl1{--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom:initial;--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop:initial;--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
+        --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
+        var(--fds-spacing-64)
+    );}.s1vsayl1>:where(.c1ls09wh:last-child){margin-bottom:var(
+            --fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom,
+            var(--fds-spacing-64)
+        );}.s1vsayl1>:where(.f1s12qxk:not(:first-child)){margin-top:var(
+            --fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop,
+            var(--fds-spacing-32)
+        );}.s1vsayl1>:where(.f1s12qxk:last-child){margin-bottom:var(
+            --fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom,
+            var(--fds-spacing-64)
+        );}.s1vsayl1>:where(
+            .c1ls09wh:first-child, .f1s12qxk:first-child
+        ){margin-top:var(--fds-internal-modalV2-slotSpacer-firstChildMarginTop);}.s1vsayl1[data-has-close-button="true"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
+            --fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton,
+            0
+        );}.s1vsayl1[data-has-close-button="false"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
+            --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
+            var(--fds-spacing-64)
+        );}
+.h1adf5mq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-16);}.h1adf5mq[data-close-button-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.hii7rdr{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}
+.ha88pah{padding:0;color:var(--fds-colour-icon);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.ha88pah svg{height:2rem;width:2rem;}
+.h3mtfiz{width:2rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}

package/modal-v2/types.d.ts

@@ -1,32 +1,143 @@
+/**
+ * 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> {
+    /**
+     * @default "modal-card"
+     */
     "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> {
+    /**
+     * @default "modal-close-button"
+     */
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `ModalV2.Header` slot.
+ */
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @default "modal-header"
+     */
+    "data-testid"?: string | undefined;
+    /**
+     * Heading text rendered in the header. Always centered regardless of
+     * `closeButtonPosition`. Omit for a close-button-only header.
+     */
+    title?: string | undefined;
+    /**
+     * Which side of the header the close button is placed on. The title
+     * alignment adjusts automatically.
+     *
+     * @default "right"
+     */
+    closeButtonPosition?: "left" | "right" | undefined;
+}
+/**
+ * Props for the `ModalV2.Content` slot.
+ */
 export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @default "modal-content"
+     */
     "data-testid"?: string | undefined;
     children: React.ReactNode;
 }
+/**
+ * Props for the `ModalV2.Footer` slot.
+ */
 export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @default "modal-footer"
+     */
     "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> {
+    /**
+     * @default "modal"
+     */
     "data-testid"?: string | undefined;
+    /**
+     * Controls whether the modal is visible.
+     *
+     * @default false
+     */
     show: boolean;
-    children: React.ReactNode;
-    /** Animation direction of appearance and dismissal. Values: "top" | "bottom" | "left" | "right" */
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{ImageWithFallback as t}from"../shared/image-with-fallback/image-with-fallback.js";import{Container as r}from"./brand.styles.js";const e=({resources:e,onClick:o,"data-id":i,"data-testid":d="navbar-brand",type:n})=>{const s=!!o,m=s?"primary"===n?`Go to ${e.brandName} homepage`:`Go to ${e.brandName}`:e.brandName,l=s?{role:"link",tabIndex:0,onClick:a=>{o&&(a.preventDefault(),o(a,n))}}:{};return a(r,Object.assign({"data-id":i,"data-testid":d,$type:n,as:s?"a":"div"},l,{children:a(t,{src:e.logoSrc,alt:m})}))};export{e as Brand};
+import{jsx as a}from"react/jsx-runtime";import{ImageWithFallback as t}from"../shared/image-with-fallback/image-with-fallback.js";import{container as r}from"./brand.styles.js";const e=({resources:e,onClick:d,"data-id":o,"data-testid":i="navbar-brand",type:s})=>{const l=a=>{d&&(a.preventDefault(),d(a,s))},n=!!d,c=n?"primary"===s?`Go to ${e.brandName} homepage`:`Go to ${e.brandName}`:e.brandName;return n?a("a",{"data-id":o,"data-testid":i,className:r,role:"link",tabIndex:0,onClick:l,children:a(t,{src:e.logoSrc,alt:c})}):a("div",{"data-id":o,"data-testid":i,className:r,children:a(t,{src:e.logoSrc,alt:c})})};export{e as Brand};
 //# sourceMappingURL=brand.js.map

package/navbar/brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"brand.js","sources":["../../src/navbar/brand.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport { Container } from \"./brand.styles\";\nimport type { BrandType, NavbarBrandingProps } from \"./types\";\n\ninterface Props {\n    resources: NavbarBrandingProps;\n    compress?: boolean | undefined;\n    \"data-id\"?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    type: BrandType;\n    onClick?:\n        | ((\n              event: React.MouseEvent<HTMLAnchorElement>,\n              type: BrandType\n          ) => void)\n        | undefined;\n}\n\nexport const Brand = ({\n    resources,\n    onClick,\n    \"data-id\": dataId,\n    \"data-testid\": testId = \"navbar-brand\",\n    type,\n}: Props) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (onClick) {\n            event.preventDefault();\n            onClick(event, type);\n        }\n    };\n\n    // Determine if this should be clickable - brands are clickable by default\n    const isClickable = !!onClick;\n\n    const logoLabel = isClickable\n        ? type === \"primary\"\n            ? `Go to ${resources.brandName} homepage`\n            : `Go to ${resources.brandName}`\n        : resources.brandName;\n\n    const props = isClickable\n        ? {\n              role: \"link\",\n              tabIndex: 0,\n              onClick: handleClick,\n          }\n        : {};\n\n    return (\n        <Container\n            data-id={dataId}\n            data-testid={testId}\n            $type={type}\n            as={isClickable ? \"a\" : \"div\"}\n            {...props}\n        >\n            <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n        </Container>\n    );\n};\n\n// TODO: Fix img size in drawer\n"],"names":["Brand","resources","onClick","dataId","testId","type","isClickable","logoLabel","brandName","props","role","tabIndex","event","preventDefault","_jsx","Container","Object","assign","$type","as","children","ImageWithFallback","src","logoSrc","alt"],"mappings":"qLAoBaA,EAAQ,EACjBC,YACAC,UACA,UAAWC,EACX,cAAeC,EAAS,eACxBC,WAKA,MAQMC,IAAgBJ,EAEhBK,EAAYD,EACH,YAATD,EACI,SAASJ,EAAUO,qBACnB,SAASP,EAAUO,YACvBP,EAAUO,UAEVC,EAAQH,EACR,CACII,KAAM,OACNC,SAAU,EACVT,QApBWU,IACbV,IACAU,EAAMC,iBACNX,EAAQU,EAAOP,GACnB,GAkBE,CAAA,EAEN,OACIS,EAACC,EAASC,OAAAC,OAAA,CAAA,UACGd,gBACIC,EAAMc,MACZb,EACPc,GAAIb,EAAc,IAAM,OACpBG,EAAK,CAAAW,SAETN,EAACO,EAAiB,CAACC,IAAKrB,EAAUsB,QAASC,IAAKjB,MACxC"}
+{"version":3,"file":"brand.js","sources":["../../src/navbar/brand.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport * as styles from \"./brand.styles\";\nimport type { BrandType, NavbarBrandingProps } from \"./types\";\n\ninterface Props {\n    resources: NavbarBrandingProps;\n    compress?: boolean | undefined;\n    \"data-id\"?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    type: BrandType;\n    onClick?:\n        | ((\n              event: React.MouseEvent<HTMLAnchorElement>,\n              type: BrandType\n          ) => void)\n        | undefined;\n}\n\nexport const Brand = ({\n    resources,\n    onClick,\n    \"data-id\": dataId,\n    \"data-testid\": testId = \"navbar-brand\",\n    type,\n}: Props) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (onClick) {\n            event.preventDefault();\n            onClick(event, type);\n        }\n    };\n\n    // Determine if this should be clickable - brands are clickable by default\n    const isClickable = !!onClick;\n\n    const logoLabel = isClickable\n        ? type === \"primary\"\n            ? `Go to ${resources.brandName} homepage`\n            : `Go to ${resources.brandName}`\n        : resources.brandName;\n\n    if (isClickable) {\n        return (\n            <a\n                data-id={dataId}\n                data-testid={testId}\n                className={styles.container}\n                role=\"link\"\n                tabIndex={0}\n                onClick={handleClick}\n            >\n                <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n            </a>\n        );\n    }\n\n    return (\n        <div data-id={dataId} data-testid={testId} className={styles.container}>\n            <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n        </div>\n    );\n};\n\n// TODO: Fix img size in drawer\n"],"names":["Brand","resources","onClick","dataId","testId","type","handleClick","event","preventDefault","isClickable","logoLabel","brandName","_jsx","className","styles.container","role","tabIndex","children","ImageWithFallback","src","logoSrc","alt"],"mappings":"qLAoBaA,EAAQ,EACjBC,YACAC,UACA,UAAWC,EACX,cAAeC,EAAS,eACxBC,WAKA,MAAMC,EAAeC,IACbL,IACAK,EAAMC,iBACNN,EAAQK,EAAOF,GACnB,EAIEI,IAAgBP,EAEhBQ,EAAYD,EACH,YAATJ,EACI,SAASJ,EAAUU,qBACnB,SAASV,EAAUU,YACvBV,EAAUU,UAEhB,OAAIF,EAEIG,EAAA,IAAA,CAAA,UACaT,EAAM,cACFC,EACbS,UAAWC,EACXC,KAAK,OACLC,SAAU,EACVd,QAASI,EAAWW,SAEpBL,EAACM,EAAiB,CAACC,IAAKlB,EAAUmB,QAASC,IAAKX,MAMxDE,EAAA,MAAA,CAAA,UAAcT,EAAM,cAAeC,EAAQS,UAAWC,EAAgBG,SAClEL,EAACM,EAAiB,CAACC,IAAKlB,EAAUmB,QAASC,IAAKX,KAC9C"}

package/navbar/brand.styles.d.ts

@@ -1,6 +1 @@
-import type { BrandType } from "./types";
-interface StyleProps {
-    $type?: BrandType | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, StyleProps>> & string;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;

package/navbar/brand.styles.js

@@ -1,13 +1,2 @@
-import t from"styled-components";import{V3_Motion as e}from"../v3_theme/index.js";const i=t.a`
-    display: flex;
-    justify-content: center;
-    height: 100%;
-
-    img {
-        width: auto;
-        height: 100%;
-        transition: ${e["duration-150"]} ${e["ease-default"]};
-        object-fit: contain;
-    }
-`;export{i as Container};
+import"./brand.styles_zcgddp.css";const s="cw4lf53";export{s as container};
 //# sourceMappingURL=brand.styles.js.map

package/navbar/brand.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"brand.styles.js","sources":["../../src/navbar/brand.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Motion } from \"../v3_theme\";\nimport type { BrandType } from \"./types\";\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    $type?: BrandType | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.a<StyleProps>`\n    display: flex;\n    justify-content: center;\n    height: 100%;\n\n    img {\n        width: auto;\n        height: 100%;\n        transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n        object-fit: contain;\n    }\n`;\n"],"names":["Container","styled","a","V3_Motion"],"mappings":"kFAgBO,MAAMA,EAAYC,EAAOC,CAAa;;;;;;;;sBAQvBC,EAAU,mBAAmBA,EAAU;;;"}
+{"version":3,"file":"brand.styles.js","sources":["../../src/navbar/brand.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Motion } from \"../theme\";\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    height: 100%;\n\n    img {\n        width: auto;\n        height: 100%;\n        transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n        object-fit: contain;\n    }\n`;\n"],"names":["container"],"mappings":"wDAIO,MAAMA,EAAS"}

package/navbar/brand.styles_zcgddp.css

@@ -0,0 +1 @@
+@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 r,jsxs as e,Fragment as n}from"react/jsx-runtime";import a,{useState as i,useRef as o,useEffect as d,useLayoutEffect as t}from"react";import{Brand as s}from"./brand.js";import{Wrapper as c,Container as l,Content as m,TopBar as u,CloseButton as w,CloseIcon as f}from"./drawer.styles.js";import{NavBrandContainer as h,NavSeparator as p}from"./navbar.styles.js";const b=a.forwardRef(((a,b)=>{const{show:v,resources:y={},children:g,hideNavBranding:C,onClose:k,onBrandClick:j,drawerLabel:_="Mobile navigation menu",mobileMenuRef:x}=a,[E,H]=i(0),L=o(null),{primary:T,secondary:z}=y,B=()=>{if(window){const r=.01*window.innerHeight;H(r)}};d((()=>(B(),window.addEventListener("resize",B),()=>{window.removeEventListener("resize",B)})),[]),t((()=>{if(v){const r=setTimeout((()=>{L.current&&L.current.focus({preventScroll:!0})}),550);return()=>clearTimeout(r)}}),[v]);return r(c,{ref:b,"data-testid":"drawer",children:r(l,{ref:L,$show:v,$viewHeight:E,onKeyDown:r=>{v&&"Escape"===r.key&&(r.preventDefault(),null==k||k(),setTimeout((()=>{var r;null===(r=null==x?void 0:x.current)||void 0===r||r.focus()}),300))},tabIndex:v?0:-1,"aria-label":_,children:e(m,{children:[e(u,{children:[r(h,{"data-id":"drawer-brand-container",children:!C&&e(n,{children:[T&&r(s,{resources:T,compress:!0,onClick:j,"data-id":"drawer-brand-primary","data-testid":"drawer__brand",type:"primary"}),z&&e(n,{children:[r(p,{}),r(s,{resources:z,compress:!0,onClick:j,"data-id":"drawer-brand-secondary","data-testid":"drawer__brand-secondary",type:"secondary"})]})]})}),r(w,{onClick:k,focusHighlight:!1,"aria-label":"Close nav menu",children:r(f,{})})]}),g]})})})}));export{b 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 React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Brand } from \"./brand\";\nimport {\n    CloseButton,\n    CloseIcon,\n    Container,\n    Content,\n    TopBar,\n    Wrapper,\n} from \"./drawer.styles\";\nimport { NavBrandContainer, NavSeparator } 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    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                        <NavSeparator />\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        <TopBar>\n            <NavBrandContainer data-id=\"drawer-brand-container\">\n                {!hideNavBranding && renderBrand()}\n            </NavBrandContainer>\n            <CloseButton\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CloseIcon />\n            </CloseButton>\n        </TopBar>\n    );\n\n    return (\n        <Wrapper ref={ref} data-testid=\"drawer\">\n            <Container\n                ref={containerRef}\n                $show={show}\n                $viewHeight={viewHeight}\n                onKeyDown={handleKeyDown}\n                tabIndex={show ? 0 : -1}\n                aria-label={drawerLabel}\n            >\n                <Content>\n                    {renderTopBar()}\n                    {children}\n                </Content>\n            </Container>\n        </Wrapper>\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","primary","secondary","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","Wrapper","Container","$show","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","Content","TopBar","NavBrandContainer","_Fragment","Brand","compress","onClick","type","NavSeparator","CloseButton","focusHighlight","CloseIcon"],"mappings":"qXAcA,MA6IaA,EAASC,EAAMC,YA7IV,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,OAEtCC,QAAEA,EAAOC,UAAEA,GAAcb,EAKzBc,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMR,EAAkC,IAArBQ,OAAOC,YAC1BR,EAAcD,EAClB,GAmBJU,GAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,GAAgB,KACZ,GAAIrB,EAAM,CACN,MAAMsB,EAAQC,YAAW,KACjBZ,EAAaa,SACbb,EAAaa,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAACtB,IAkDJ,OACI4B,EAACC,EAAO,CAAC9B,IAAKA,EAAG,cAAc,SAAQG,SACnC0B,EAACE,EAAS,CACN/B,IAAKY,EAAYoB,MACV/B,cACMQ,EACbwB,UA5FWC,IACdjC,GAEa,WAAdiC,EAAMC,MACND,EAAME,iBACN/B,SAAAA,IAEAmB,YAAW,WACe,QAAtBa,EAAA7B,aAAa,EAAbA,EAAeiB,eAAO,IAAAY,GAAAA,EAAEX,OAAO,GAChC,KACP,EAmFQY,SAAUrC,EAAO,GAAI,EAAE,aACXM,WAEZgC,EAACC,EAAO,CAAArC,SAAA,CAxBhBoC,EAACE,EAAM,CAAAtC,SAAA,CACH0B,EAACa,aAA0B,yBAAwBvC,UAC7CC,GA/BNmC,EAAAI,EAAA,CAAAxC,SAAA,CACKW,GACGe,EAACe,EAAK,CACF1C,UAAWY,EACX+B,UAAQ,EACRC,QAASxC,EAAY,UACb,uBAAsB,cAClB,gBACZyC,KAAK,YAGZhC,GACGwB,EAAAI,EAAA,CAAAxC,SAAA,CACI0B,EAACmB,EAAY,IACbnB,EAACe,EAAK,CACF1C,UAAWa,EACX8B,UAAQ,EACRC,QAASxC,EAAY,UACb,yBAAwB,cACpB,0BACZyC,KAAK,sBAarBlB,EAACoB,EAAW,CACRH,QAASzC,EACT6C,gBAAgB,EAAK,aACV,0BAEXrB,EAACsB,WAiBIhD,QAGH"}
+{"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.d.ts

@@ -1,16 +1,13 @@
-interface StyleProps {
-    $show: boolean;
-    $viewHeight?: number | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyleProps>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TopBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CloseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-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>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const tokens: {
+    container: {
+        viewHeight: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerShown: import("@linaria/core").LinariaClassName;
+export declare const containerHidden: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const topBar: import("@linaria/core").LinariaClassName;
+export declare const closeIcon: import("@linaria/core").LinariaClassName;
+export declare const closeButton: import("@linaria/core").LinariaClassName;

package/navbar/drawer.styles.js

@@ -1,66 +1,2 @@
-import{CrossIcon as i}from"@lifesg/react-icons/cross";import e,{css as o}from"styled-components";import{ClickableIcon as t}from"../shared/clickable-icon/clickable-icon.js";import{V3_MediaQuery as s,V3_Spacing as n,V3_Colour as a,V3_Shadow as l,V3_Motion as r}from"../v3_theme/index.js";const c=e.div`
-    display: none;
-
-    ${s.MaxWidth.lg} {
-        display: flex;
-    }
-`,d=e.nav`
-    position: absolute;
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: 100vh;
-    display: block;
-    padding: 0 0 ${n["spacing-16"]};
-    background-color: ${a.bg};
-    box-shadow: ${l["xs-subtle"]};
-    visibility: ${i=>i.$show?"visible":"hidden"};
-    outline: none;
-
-    ${i=>i.$show?o`
-            right: 0;
-            transition: all 300ms ${r["ease-entrance"]};
-            transition-delay: 200ms;
-        `:o`
-        right: -100%;
-        transition: all 300ms ${r["ease-exit"]};
-    `}
-    ${i=>{let e="1vh";return i.$viewHeight&&(e=`${i.$viewHeight}px`),o`
-            height: calc(${e} * 100);
-        `}}
-
-	${s.MaxWidth.lg} {
-        width: 75%;
-    }
-
-    ${s.MaxWidth.sm} {
-        width: 100%;
-    }
-`,h=e.div`
-    display: flex;
-    flex-direction: column;
-`,g=e.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    padding: ${n["spacing-40"]} ${n["spacing-20"]}
-        ${n["spacing-32"]};
-`,p=e(i)`
-    height: 1.5rem;
-    width: 1.5rem;
-`,$=e(t)`
-    position: absolute;
-    right: -${n["spacing-4"]};
-    color: ${a.icon};
-
-    &:active,
-    &:focus {
-        color: ${a["icon-hover"]};
-    }
-
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-    }
-`;export{$ as CloseButton,p as CloseIcon,d as Container,h as Content,g as TopBar,c as Wrapper};
+import"./drawer.styles_7hnxp5.css";const c={container:{viewHeight:"--fds-internal-navbar-drawer-viewHeight"}},e="w13l2hkd",r="c1dn2jn3",t="cc2efvs",a="c9clmba",n="c1yr3tbf",s="tkfa6sy",i="csth4gk",h="c4lb5hz";export{h as closeButton,i as closeIcon,r as container,a as containerHidden,t as containerShown,n as content,c as tokens,s as topBar,e as wrapper};
 //# sourceMappingURL=drawer.styles.js.map