@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/otp-verification/types.d.ts

@@ -1,52 +1,171 @@
-import { BaseFormElementProps } from "src/form/types";
-import { PhoneNumberInputValue } from "../phone-number-input";
+import type { BaseFormElementProps } from "../form/types";
+import type { PhoneNumberInputValue } from "../phone-number-input";
+import type { VerificationSectionProps } from "./internal-types";
+/**
+ * Lifecycle state of the OTP verification flow.
+ *
+ * - `"default"` — initial state; the contact input is displayed.
+ * - `"sent"` — OTP has been dispatched; the OTP entry and verification section appears.
+ * - `"verified"` — OTP was successfully verified; the success confirmation is displayed.
+ */
 export type OtpVerificationState = "default" | "sent" | "verified";
+/**
+ * Base props shared by all variants of the `OtpVerification` component.
+ */
 export interface BaseOtpVerificationProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     className?: string | undefined;
+    /**
+     * The `id` attribute applied to the contact input field.
+     */
     inputId?: string | undefined;
+    /**
+     * The current step in the OTP verification flow.
+     * Controls which sections are rendered.
+     */
     otpState: OtpVerificationState;
+    /**
+     * Called when the component transition to a new `otpState`.
+     */
     onOtpStateChange: (state: OtpVerificationState) => void;
+    /**
+     * Called when the user initiates sending the OTP.
+     * On resolution, the component transitions to `"sent"`.
+     *
+     * @remarks a rejection is silently swallowed. The consumer must use `sendOtpError` to show feedback
+     */
     onSendOtp?: (() => Promise<void>) | undefined;
+    /**
+     * Error message displayed below the contact input after a failed attempt.
+     */
     sendOtpError?: string | undefined;
+    /**
+     * Placeholder text for the contact input field.
+     */
     sendOtpPlaceholder?: string | undefined;
+    /**
+     * Interval in seconds at which an accessibility announcement is made,
+     * reminding the user how many seconds remain before they can resend the OTP.
+     *
+     * @default 120
+     */
     otpReminderInterval?: number | undefined;
 }
+/**
+ * Email-specific props for `OtpVerification`.
+ */
 export interface OtpVerificationEmailInputProps {
+    /**
+     * Discriminant that sets the contact input to email mode.
+     */
     type: "email";
+    /**
+     * Controlled value of the email input.
+     */
     emailValue?: string | undefined;
+    /**
+     * Called when the email input value changes.
+     */
     onEmailChange?: ((input: string) => void) | undefined;
 }
+/**
+ * Phone-number-specific props for `OtpVerification`.
+ */
 export interface OtpVerificationPhoneNumberInputProps {
+    /**
+     * Discriminant that sets the contact input to phone number mode.
+     */
     type: "phone-number";
+    /**
+     * Controlled value of the phone number input.
+     */
     phoneNumberValue?: PhoneNumberInputValue | undefined;
+    /**
+     * Called when the phone number input value changes.
+     */
     onPhoneNumberChange?: ((value: PhoneNumberInputValue) => void) | undefined;
+    /**
+     * Always `true`; the country selector is locked and cannot be changed by the user.
+     */
     fixedCountry: true;
 }
-export interface OtpVerificationInputProps {
+/**
+ * Props for controlling the OTP input field and verification step.
+ */
+export interface OtpVerificationInputProps extends Pick<VerificationSectionProps, "showVerifyOtpThumbnail" | "verifyOtpIcon" | "verifyOtpTitle" | "verifyOtpMessage" | "verifyOtpError"> {
+    /**
+     * Controlled state of the OTP input field.
+     */
     otpValue?: {
+        /**
+         * Static text displayed before the OTP input.
+         */
         prefix?: string | undefined;
+        /**
+         * Character displayed between the `prefix` and OTP input..
+         */
         separator?: string | undefined;
+        /**
+         * The current OTP string entered by the user.
+         */
         value?: string | undefined;
     } | undefined;
+    /**
+     * Called when the OTP input value changes.
+     *
+     * @param value The full OTP string without prefix or separators.
+     */
     onOtpChange?: ((value: string) => void) | undefined;
+    /**
+     * Called when the user submits the OTP for verification.
+     * On resolution the component transitions to `"verified"`.
+     *
+     * @param input The current OTP string.
+     *
+     * @remarks a rejection is silently swallowed. The consumer must use `verifyOtpError` to show feedback
+     */
     onVerifyOtp?: ((input: string) => Promise<void>) | undefined;
+    /**
+     * Duration in seconds of the resend cooldown after an OTP is sent.
+     *
+     * @default 60
+     */
     verifyOtpCountdownTimer?: number | undefined;
+    /**
+     * Called when the user requests to resend the OTP from the verification step.
+     */
     onResendOtp?: (() => Promise<void>) | undefined;
-    verifyOtpError?: string | undefined;
-    showVerifyOtpThumbnail?: boolean | undefined;
-    verifyOtpIcon?: React.ReactNode | undefined;
-    verifyOtpTitle?: string | undefined;
-    verifyOtpMessage?: string | undefined;
 }
+/**
+ * Combined props for email-based OTP verification.
+ */
 export type EmailOtpVerificationProps = BaseOtpVerificationProps & OtpVerificationEmailInputProps & OtpVerificationInputProps;
+/**
+ * Combined props for phone-number-based OTP verification.
+ */
 export type PhoneOtpVerificationProps = BaseOtpVerificationProps & OtpVerificationPhoneNumberInputProps & OtpVerificationInputProps;
+/**
+ * Props for the `OtpVerification` component.
+ */
 export type OtpVerificationProps = EmailOtpVerificationProps | PhoneOtpVerificationProps;
+/**
+ * Props for the `Form.OtpVerification` email variant, extending
+ * `EmailOtpVerificationProps` with form field layout metadata such as label
+ * and hint text.
+ */
 export interface FormEmailOtpVerificationProps extends EmailOtpVerificationProps, Omit<BaseFormElementProps, "errorMessage"> {
 }
+/**
+ * Props for the `Form.OtpVerification` phone-number variant, extending
+ * `PhoneOtpVerificationProps` with form field layout metadata such as label
+ * and hint text.
+ */
 export interface FormPhoneOtpVerificationProps extends PhoneOtpVerificationProps, Omit<BaseFormElementProps, "errorMessage"> {
 }
+/**
+ * Props for the `Form.OtpVerification` component.
+ */
 export type FormOtpVerificationProps = FormEmailOtpVerificationProps | FormPhoneOtpVerificationProps;

package/otp-verification/verification-section.d.ts

@@ -1,2 +1,2 @@
-import { VerificationSectionProps } from "./internal-types";
+import type { VerificationSectionProps } from "./internal-types";
 export declare const VerificationSection: ({ id, "data-testid": dataTestId, type, showVerifyOtpThumbnail, verifyOtpTitle, verifyOtpMessage, otpCode, setOtpCode, isVerifyLoading, countdown, onVerifyOtp, verifyOtpError, otpPrefix, otpSeparator, }: VerificationSectionProps) => import("react/jsx-runtime").JSX.Element;

package/otp-verification/verification-section.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as e}from"react/jsx-runtime";import{useContext as t}from"react";import{r}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as o}from"styled-components";import{FormErrorMessage as d}from"../form/form-label.js";import{InputGroup as a}from"../input-group/input-group.js";import{concatIds as n}from"../shared/accessibility/index.js";import{Breakpoint as l}from"../theme/index.js";import{Typography as s}from"../typography/typography.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as p}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{EmailThumbnail as m}from"./thumbnail/email-thumbnail.js";import{PhoneThumbnail as u}from"./thumbnail/phone-thumbnail.js";import{VerificationSectionWrapper as h,SectionContainer as f,VerifyInputWrapper as v,VerifyButton as y,ReSendMessage as c}from"./verification-section-styles.js";const g=({id:g,"data-testid":b,type:j,showVerifyOtpThumbnail:$=!1,verifyOtpTitle:x,verifyOtpMessage:O,otpCode:w,setOtpCode:T,isVerifyLoading:C,countdown:M,onVerifyOtp:V,verifyOtpError:P,otpPrefix:B,otpSeparator:D})=>{const E=t(o),R=r.useMediaQuery({maxWidth:l["sm-max"]({theme:E})})?64:120,k=p(),q=`${k}-title`,L=`${k}-message`,Q=`${k}-verify-input-addon`,S=`${k}-verify-error`;return i(h,{id:g,"data-testid":b,role:"group",children:[$?e("div",{"aria-hidden":!0,children:e("email"===j?m:u,{width:R,height:R})}):null,i(f,{children:[i("div",{children:[e(s.BodyMD,{weight:"semibold",id:q,"data-testid":b?`${b}-title`:void 0,children:x}),e(s.BodyMD,{weight:"regular",id:L,"data-testid":b?`${b}-message`:void 0,children:O})]}),i("div",{children:[i(v,{children:[e(a,{id:g?`${g}-verify-input`:void 0,"data-testid":b?`${b}-verify-input`:void 0,value:w,onChange:i=>null==T?void 0:T(i.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=B?B:""}${null!=D?D:""}`}},type:"number",error:!!P,"aria-labelledby":q,"aria-describedby":n(L,Q,P?S:void 0),"aria-invalid":!!P,"aria-required":!0}),e(y,{id:g?`${g}-verify-button`:void 0,type:"button","data-testid":b?`${b}-verify-button`:void 0,onClick:V,loading:C,styleType:"light",disabled:!w||0===w.length,children:!C&&"Verify"})]}),P&&e(d,{id:S,"data-testid":b?`${b}-verify-error`:void 0,role:"alert",children:P})]}),M.isRunning&&i(c,{id:g?`${g}-countdown`:void 0,"data-testid":b?`${b}-countdown`:void 0,children:["Resend OTP in ",M.formatTime()]})]})]})};export{g as VerificationSection};
+import{jsxs as i,jsx as e}from"react/jsx-runtime";import{Button as t}from"../button/button.js";import{FormErrorMessage as r}from"../form/form-label/form-label.js";import{InputGroup as o}from"../input-group/input-group.js";import{concatIds as d}from"../shared/accessibility/index.js";import{Typography as a}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"react";import{useId as l}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{EmailThumbnail as n}from"./thumbnail/email-thumbnail.js";import{PhoneThumbnail as s}from"./thumbnail/phone-thumbnail.js";import{verificationSectionWrapper as m,sectionContainer as p,verifyInputWrapper as u,verifyButton as c,resendMessage as v}from"./verification-section.styles.js";const y=({id:y,"data-testid":f,type:h,showVerifyOtpThumbnail:b=!1,verifyOtpTitle:g,verifyOtpMessage:j,otpCode:$,setOtpCode:O,isVerifyLoading:w,countdown:x,onVerifyOtp:T,verifyOtpError:N,otpPrefix:C,otpSeparator:M})=>{const V=l(),B=`${V}-title`,D=`${V}-message`,P=`${V}-verify-input-addon`,E=`${V}-verify-error`;return i("div",{id:y,"data-testid":f,role:"group",className:m,children:[b?e("div",{"aria-hidden":!0,children:e("email"===h?n:s,{})}):null,i("div",{className:p,children:[i("div",{children:[e(a.BodyMD,{weight:"semibold",id:B,"data-testid":f?`${f}-title`:void 0,children:g}),e(a.BodyMD,{weight:"regular",id:D,"data-testid":f?`${f}-message`:void 0,children:j})]}),i("div",{children:[i("div",{className:u,children:[e(o,{id:y?`${y}-verify-input`:void 0,"data-testid":f?`${f}-verify-input`:void 0,value:$,onChange:i=>null==O?void 0:O(i.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=C?C:""}${null!=M?M:""}`}},type:"number",error:!!N,"aria-labelledby":B,"aria-describedby":d(D,P,N?E:void 0),"aria-invalid":!!N,"aria-required":!0}),e(t,{id:y?`${y}-verify-button`:void 0,type:"button","data-testid":f?`${f}-verify-button`:void 0,onClick:T,loading:w,styleType:"light",disabled:!$||0===$.length,className:c,children:!w&&"Verify"})]}),N&&e(r,{id:E,"data-testid":f?`${f}-verify-error`:void 0,role:"alert",children:N})]}),x.isRunning&&i(a.BodyMD,{id:y?`${y}-countdown`:void 0,"data-testid":f?`${f}-countdown`:void 0,className:v,children:["Resend OTP in ",x.formatTime()]})]})]})};export{y as VerificationSection};
 //# sourceMappingURL=verification-section.js.map

package/otp-verification/verification-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"verification-section.js","sources":["../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const theme = useContext(ThemeContext);\n    const isMobile = useMediaQuery({\n        maxWidth: Breakpoint[\"sm-max\"]({ theme }),\n    });\n    const thumbnailSize = isMobile ? 64 : 120;\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["VerificationSection","id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","theme","useContext","ThemeContext","thumbnailSize","useMediaQuery","maxWidth","Breakpoint","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","VerificationSectionWrapper","role","_jsx","children","EmailThumbnail","PhoneThumbnail","width","height","SectionContainer","Typography","BodyMD","weight","undefined","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"u+BAmBO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAQC,EAAWC,GAInBC,EAHWC,EAAAA,cAAc,CAC3BC,SAAUC,EAAW,UAAU,CAAEN,YAEJ,GAAK,IAChCO,EAAaC,IAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAACC,EAA0B,CACvB5B,GAAIA,gBACSC,EACb4B,KAAK,kBAvBJ1B,EAGD2B,EAAA,MAAA,CAAA,eAAA,EAAAC,SAEQD,EADM,UAAT5B,EACI8B,EAKAC,EALc,CACXC,MAAOjB,EACPkB,OAAQlB,MAPY,KA0BhCU,EAACS,EAAgB,CAAAL,SAAA,CACbJ,EAAA,MAAA,CAAAI,SAAA,CACID,EAACO,EAAWC,OAAM,CACdC,OAAO,WACPvC,GAAIuB,EAAO,cAEPtB,EAAa,GAAGA,eAAqBuC,EAAST,SAGjD3B,IAEL0B,EAACO,EAAWC,OAAM,CACdC,OAAO,UACPvC,GAAIwB,EAAS,cAETvB,EAAa,GAAGA,iBAAuBuC,EAAST,SAGnD1B,OAGTsB,mBACIA,EAACc,aACGX,EAACY,EAAU,CACP1C,GAAIA,EAAK,GAAGA,sBAAoBwC,EAAS,cAErCvC,EACM,GAAGA,sBACHuC,EAEVG,MAAOrC,EACPsC,SAAWC,GAAMtC,aAAU,EAAVA,EAAasC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACH9C,KAAM,QACN+C,WAAY,CACRN,MAAO,GAAG/B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACLgD,QAASvC,EAAc,kBACNY,EAAO,mBACN4B,EACd3B,EACAC,EACAd,EAAiBe,OAAgBc,oBAErB7B,EAAc,iBACf,IAEnBmB,EAACsB,EAAY,CACTpD,GAAIA,EAAK,GAAGA,uBAAqBwC,EACjCtC,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACHuC,EAEVa,QAAS3C,EACT4C,QAAS9C,EACT+C,UAAU,QACVC,UAAWlD,GAA8B,IAAnBA,EAAQmD,OAAY1B,UAExCvB,GAAmB,cAG5BG,GACGmB,EAAC4B,EAAgB,CACb1D,GAAI0B,gBAEAzB,EACM,GAAGA,sBACHuC,EAEVX,KAAK,QAAOE,SAEXpB,OAIZF,EAAUkD,WACPhC,EAACiC,EAAa,CACV5D,GAAIA,EAAK,GAAGA,mBAAiBwC,EAAS,cAElCvC,EAAa,GAAGA,mBAAyBuC,EAAST,SAAA,CAAA,iBAGvCtB,EAAUoD,qBAIZ"}
+{"version":3,"file":"verification-section.js","sources":["../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport * as styles from \"./verification-section.styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? <EmailThumbnail /> : <PhoneThumbnail />}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n            className={styles.verificationSectionWrapper}\n        >\n            {renderThumbnail()}\n            <div className={styles.sectionContainer}>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <div className={styles.verifyInputWrapper}>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <Button\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                            className={styles.verifyButton}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </Button>\n                    </div>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <Typography.BodyMD\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                        className={styles.resendMessage}\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["VerificationSection","id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","role","className","styles.verificationSectionWrapper","children","_jsx","EmailThumbnail","PhoneThumbnail","styles.sectionContainer","Typography","BodyMD","weight","undefined","styles.verifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","Button","onClick","loading","styleType","disabled","length","styles.verifyButton","FormErrorMessage","isRunning","styles.resendMessage","formatTime"],"mappings":"m0BAUO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAaC,IAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAYzB,OACIM,EAAA,MAAA,CACIpB,GAAIA,gBACSC,EACboB,KAAK,QACLC,UAAWC,EAAiCC,SAAA,CAd3CrB,EAGDsB,EAAA,MAAA,CAAA,eAAA,EAAAD,SACwBC,EAAV,UAATvB,EAAoBwB,EAAqBC,EAAP,CAAA,KAJP,KAiBhCP,EAAA,MAAA,CAAKE,UAAWM,EAAuBJ,SAAA,CACnCJ,EAAA,MAAA,CAAAI,SAAA,CACIC,EAACI,EAAWC,QACRC,OAAO,WACP/B,GAAIgB,EAAO,cAEPf,EAAa,GAAGA,eAAqB+B,EAASR,SAGjDpB,IAELqB,EAACI,EAAWC,OAAM,CACdC,OAAO,UACP/B,GAAIiB,gBAEAhB,EAAa,GAAGA,iBAAuB+B,EAASR,SAGnDnB,OAGTe,EAAA,MAAA,CAAAI,SAAA,CACIJ,EAAA,MAAA,CAAKE,UAAWW,EAAyBT,SAAA,CACrCC,EAACS,EAAU,CACPlC,GAAIA,EAAK,GAAGA,sBAAoBgC,EAAS,cAErC/B,EACM,GAAGA,sBACH+B,EAEVG,MAAO7B,EACP8B,SAAWC,GAAM9B,aAAU,EAAVA,EAAa8B,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHtC,KAAM,QACNuC,WAAY,CACRN,MAAO,GAAGvB,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACLwC,QAAS/B,EAAc,kBACNK,EAAO,mBACN2B,EACd1B,EACAC,EACAP,EAAiBQ,OAAgBa,oBAErBrB,EAAc,iBACf,IAEnBc,EAACmB,EAAM,CACH5C,GAAIA,EAAK,GAAGA,uBAAqBgC,EACjC9B,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACH+B,EAEVa,QAASnC,EACToC,QAAStC,EACTuC,UAAU,QACVC,UAAW1C,GAA8B,IAAnBA,EAAQ2C,OAC9B3B,UAAW4B,EAAmB1B,UAE5BhB,GAAmB,cAG5BG,GACGc,EAAC0B,GACGnD,GAAImB,EAAa,cAEblB,EACM,GAAGA,sBACH+B,EAEVX,KAAK,QAAOG,SAEXb,OAIZF,EAAU2C,WACPhC,EAACS,EAAWC,OAAM,CACd9B,GAAIA,EAAK,GAAGA,mBAAiBgC,EAAS,cAElC/B,EAAa,GAAGA,mBAAyB+B,EAE7CV,UAAW+B,EAAoB7B,SAAA,CAAA,iBAEhBf,EAAU6C,qBAInC"}

package/otp-verification/verification-section.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const verificationSectionWrapper: import("@linaria/core").LinariaClassName;
+export declare const sectionContainer: import("@linaria/core").LinariaClassName;
+export declare const resendMessage: import("@linaria/core").LinariaClassName;
+export declare const verifyInputWrapper: import("@linaria/core").LinariaClassName;
+export declare const verifyButton: import("@linaria/core").LinariaClassName;

package/otp-verification/verification-section.styles.js

@@ -0,0 +1,2 @@
+import"./verification-section.styles_x8jj.css";const i="v1j5kvy",o="s1h7j64h",t="rl8lhyn",j="v1ob0u9j",s="v61u1jj";export{t as resendMessage,o as sectionContainer,i as verificationSectionWrapper,s as verifyButton,j as verifyInputWrapper};
+//# sourceMappingURL=verification-section.styles.js.map

package/otp-verification/verification-section.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verification-section.styles.js","sources":["../../src/otp-verification/verification-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const verificationSectionWrapper = css`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg-strong\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    gap: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n        align-items: start;\n        gap: ${Spacing[\"spacing-16\"]};\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const sectionContainer = css`\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const resendMessage = css`\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const verifyInputWrapper = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-8\"]};\n    max-width: 472px;\n`;\n\nexport const verifyButton = css`\n    flex-shrink: 0;\n    width: 83px;\n`;\n"],"names":["verificationSectionWrapper","sectionContainer","resendMessage","verifyInputWrapper","verifyButton"],"mappings":"+EAIO,MAAMA,EAA0B,UAe1BC,EAAgB,WAMhBC,EAAa,UAIbC,EAAkB,WAMlBC,EAAY"}

package/otp-verification/verification-section.styles_x8jj.css

@@ -0,0 +1,5 @@
+@layer fds{.v1j5kvy{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;background-color:var(--fds-colour-bg-strong);padding:var(--fds-spacing-16) var(--fds-spacing-32);gap:var(--fds-spacing-32);}:where(body.fds-breakpoint-sm-max) .v1j5kvy{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;gap:var(--fds-spacing-16);padding:var(--fds-spacing-16);}
+.s1h7j64h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-16);}
+.rl8lhyn{color:var(--fds-colour-text-subtlest);}
+.v1ob0u9j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-8);max-width:472px;}
+.v61u1jj{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:83px;}}

package/overlay/overlay.d.ts

@@ -1,2 +1,10 @@
-import { OverlayProps } from "./types";
+import type { OverlayProps } from "./types";
+/**
+ * A full-screen dimmed overlay backdrop.
+ *
+ * Use `Overlay` as the backdrop for modal dialogs, drawers, and similar
+ * blocking UI patterns. It manages body scroll-lock automatically and stacks
+ * correctly when multiple overlays are open at once.
+ * @keywords backdrop, dim, modal
+ */
 export declare const Overlay: (props: OverlayProps) => import("react/jsx-runtime").JSX.Element;

package/overlay/overlay.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{FloatingTree as e,useFloatingNodeId as o,FloatingNode as n}from"@floating-ui/react";import{useState as r,useRef as i,useEffect as d}from"react";import l from"react-dom";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Root as c,Wrapper as a}from"./overlay.styles.js";import{useFloatingParent as u}from"./use-floating-context.js";const m=({show:e=!1,rootId:m,onOverlayClick:y,children:b,backgroundOpacity:h,backgroundBlur:w=!0,disableTransition:$=!1,enableOverlayClick:j=!1,zIndex:O,id:k,containerRef:L})=>{const[x,T]=r(null),[E,P]=r(),I=s(),B=o(),C=i(),D=i(!1),z=i(null),A=k?`lifesg-ds-overlay-root-${k}`:"lifesg-ds-overlay-root",F=null!=O?O:E?99999:99998;u(F),d((()=>(R(),T(H()),()=>{J(),Y().length<1&&(q()&&(K("remove"),Q()),V("remove"))})),[]),d((()=>{if(e){const t=M();W(t),G(),q()&&1===Y().length&&(N(),K("add"));const e=setTimeout((()=>{V("add")}),200);return()=>clearTimeout(e)}{J(),q()&&Y().length<1&&(K("remove"),Q());const t=setTimeout((()=>{Y().length<1&&V("remove")}),200);return()=>clearTimeout(t)}}),[e]),d((()=>{if(e)return document.addEventListener("mousedown",S,!0),()=>{document.removeEventListener("mousedown",S,!0)}}),[e]);const W=t=>{C.current=t,P(t)},q=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),H=()=>document&&m?document.getElementById(m):document?document.body:null,M=()=>Y().length>0,R=()=>{if(!document.getElementById(p)){const t=document.createElement("style");t.id=p;const e=document.documentElement.clientWidth,o=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${v} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${o}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${v}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.${f} {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: var(${g}, 0);\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},V=t=>{const e=document.body.classList.contains(v);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(v):document.body.classList.add(v)},Y=()=>{const t=document.body.dataset.lifesgDsOverlayOrder;return t?t.split(","):[]},G=()=>{const t=Y();document.body.dataset.lifesgDsOverlayOrder=[...t,I].join(",")},J=()=>{const t=Y();document.body.dataset.lifesgDsOverlayOrder=t.filter((t=>t!==I)).join(",")},K=t=>{if(!q())return;const e=document.body.classList.contains(f);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(f):document.body.classList.add(f)},N=()=>{const t=document.body.style,e=t.top?t.top:window.scrollY+"px";document.body.style.setProperty(g,e)},Q=()=>{if(!q())return;const t=document.body.style.getPropertyValue(g);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(t)})}))},S=t=>{var e;const o=null!==(e=null==L?void 0:L.current)&&void 0!==e?e:z.current,n=z.current;if(!o)return void(D.current=!1);const r=t.target,i=n===r,d=o===r,l=o.contains(r);D.current=!i&&(d||l)},U=t=>{var e;const o=null!==(e=null==L?void 0:L.current)&&void 0!==e?e:z.current,n=z.current;if(!o)return void(D.current=!1);const r=t.target,i=n===r,d=o===r,l=o.contains(r);!i&&(d||l)||D.current||!y||!j||(t.preventDefault(),y()),D.current=!1};return x?l.createPortal(t(c,{id:A,"data-testid":A,$show:e,$zIndex:F,children:b&&t(n,{id:B,children:t(a,{ref:z,"data-testid":"overlay-wrapper",$show:e,$stacked:E,$backgroundBlur:w,$disableTransition:$,onClick:U,children:b})})}),x):null},y=o=>t(e,{children:t(m,Object.assign({},o))}),p="lifesg-ds-overlay-stylesheet",v="lifesg-ds-overlay-open",f="lifesg-ds-overlay-scroll-lock",g="--lifesg-ds-overlay-scroll-y";export{y as Overlay};
+import{jsx as e}from"react/jsx-runtime";import{FloatingTree as t,useFloatingNodeId as o,FloatingNode as r}from"@floating-ui/react";import n from"clsx";import{useState as l,useRef as s,useEffect as i}from"react";import a from"react-dom";import"../theme/theme-provider/index.js";import{useInheritedThemeScope as d}from"../theme/theme-provider/hooks.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 c}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{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as u,root as p,rootShow as y,wrapper as v,wrapperShow as g,wrapperHide as h,wrapperStacked as b,wrapperBackgroundBlur as f,wrapperDisableTransition as j}from"./overlay.styles.js";import{useFloatingParent as O}from"./use-floating-context.js";const k=({show:t=!1,rootId:k,onOverlayClick:L,children:w,backgroundBlur:x=!0,disableTransition:C=!1,enableOverlayClick:P=!1,zIndex:T,id:E,containerRef:D})=>{const[I,S]=l(null),[q,W]=l(),Y=m(),z=o(),A=s(),B=s(!1),F=s(null),N=s(null),$=E?`lifesg-ds-overlay-root-${E}`:"lifesg-ds-overlay-root",R=null!=T?T:q?99999:99998,{themeProps:V,themeStyle:G}=d(t);O(R),c(F,{[u.root.zIndex]:R}),i((()=>(Q(),S(K()),()=>{_(),X().length<1&&(J()&&(ee("remove"),oe()),U("remove"))})),[]),i((()=>{if(t){const e=M();H(e),Z(),J()&&1===X().length&&(te(),ee("add"));const t=setTimeout((()=>{U("add")}),200);return()=>clearTimeout(t)}{_(),J()&&X().length<1&&(ee("remove"),oe());const e=setTimeout((()=>{X().length<1&&U("remove")}),200);return()=>clearTimeout(e)}}),[t]),i((()=>{if(t)return document.addEventListener("mousedown",re,!0),()=>{document.removeEventListener("mousedown",re,!0)}}),[t]);const H=e=>{A.current=e,W(e)},J=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),K=()=>document&&k?document.getElementById(k):document?document.body:null,M=()=>X().length>0,Q=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(u.global.scrollbarWidth,`${t}px`)},U=e=>{const t=document.body.classList.contains(u.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayOpenClass):document.body.classList.add(u.global.overlayOpenClass)},X=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},Z=()=>{const e=X();document.body.dataset.lifesgDsOverlayOrder=[...e,Y].join(",")},_=()=>{const e=X();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==Y)).join(",")},ee=e=>{if(!J())return;const t=document.body.classList.contains(u.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayScrollLockClass):document.body.classList.add(u.global.overlayScrollLockClass)},te=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(u.global.scrollY,t)},oe=()=>{if(!J())return;const e=document.body.style.getPropertyValue(u.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},re=e=>{var t;const o=null!==(t=null==D?void 0:D.current)&&void 0!==t?t:N.current,r=N.current;if(!o)return void(B.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);B.current=!l&&(s||i)},ne=e=>{var t;const o=null!==(t=null==D?void 0:D.current)&&void 0!==t?t:N.current,r=N.current;if(!o)return void(B.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);!l&&(s||i)||B.current||!L||!P||(e.preventDefault(),L()),B.current=!1};return I?a.createPortal(e("div",Object.assign({ref:F,id:$,"data-testid":$,className:n(p,t&&y)},V,{style:G,children:w&&e(r,{id:z,children:e("div",{ref:N,"data-testid":"overlay-wrapper",className:n(v,t?g:h,q&&b,x&&f,C&&j),onClick:ne,children:w})})})),I):null},L=o=>e(t,{children:e(k,Object.assign({},o))});export{L as Overlay};
 //# sourceMappingURL=overlay.js.map

package/overlay/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useId } from \"../util\";\nimport { Root, Wrapper } from \"./overlay.styles\";\nimport { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n\n    useFloatingParent(zIndex);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_SCROLL_LOCK_CLASSNAME} {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: var(${SCROLL_POSITION_VAR}, 0);\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            OVERLAY_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(OVERLAY_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(OVERLAY_OPEN_CLASSNAME);\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            OVERLAY_SCROLL_LOCK_CLASSNAME\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(OVERLAY_SCROLL_LOCK_CLASSNAME);\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(OVERLAY_SCROLL_LOCK_CLASSNAME);\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(SCROLL_POSITION_VAR, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY =\n            document.body.style.getPropertyValue(SCROLL_POSITION_VAR);\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <Wrapper\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                $show={show}\n                $stacked={isStacked}\n                $backgroundBlur={backgroundBlur}\n                $disableTransition={disableTransition}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </Wrapper>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <Root\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            $show={show}\n            $zIndex={zIndex}\n        >\n            {children && renderWrapper()}\n        </Root>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-overlay-stylesheet\";\nconst OVERLAY_OPEN_CLASSNAME = \"lifesg-ds-overlay-open\";\nconst OVERLAY_SCROLL_LOCK_CLASSNAME = \"lifesg-ds-overlay-scroll-lock\";\nconst SCROLL_POSITION_VAR = \"--lifesg-ds-overlay-scroll-y\";\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","wrapperRef","overlayRootId","useFloatingParent","useEffect","addStylesheetForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","innerHTML","OVERLAY_OPEN_CLASSNAME","OVERLAY_SCROLL_LOCK_CLASSNAME","SCROLL_POSITION_VAR","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","bodyStyle","style","scrollY","top","setProperty","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Root","$show","$zIndex","FloatingNode","Wrapper","ref","$stacked","$backgroundBlur","$disableTransition","onClick","Overlay","props","FloatingTree","Object","assign"],"mappings":"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"}
+{"version":3,"file":"overlay.js","sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\n// @catalog\n/**\n * A full-screen dimmed overlay backdrop.\n *\n * Use `Overlay` as the backdrop for modal dialogs, drawers, and similar\n * blocking UI patterns. It manages body scroll-lock automatically and stacks\n * correctly when multiple overlays are open at once.\n * @keywords backdrop, dim, modal\n */\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","Overlay","props","FloatingTree"],"mappings":"2hCAgBA,MAAMA,EAAmB,EACrBC,QAAO,EACPC,SACAC,iBACAC,WACAC,kBAAiB,EACjBC,qBAAoB,EACpBC,sBAAqB,EACrBC,OAAQC,EACRC,KACAC,mBAKA,MAAOC,EAAaC,GAAkBC,EAA6B,OAC5DC,EAAWC,GAAiBF,IAC7BG,EAAMC,IACNC,EAASC,IAETC,EAAUC,IAEVC,EAA0BD,GAAO,GACjCE,EAAUF,EAAuB,MACjCG,EAAaH,EAAuB,MAEpCI,EAAgBhB,EAChB,0BAA0BA,IAC1B,yBACAF,EAASC,QAAAA,EAAiBM,EAAY,MAAQ,OAC9CY,WAAEA,EAAUC,WAAEA,GAAeC,EAAuB5B,GAE1D6B,EAAkBtB,GAElBuB,EAAcP,EAAS,CAAE,CAACQ,EAAcC,KAAKzB,QAASA,IAKtD0B,GAAU,KACNC,IACAtB,EAAeuB,KAER,KACHC,IAEIC,IAAkBC,OAAS,IACvBC,MACAC,GAA2B,UAC3BC,MAGJC,EAAoB,UACxB,IAGL,IAEHT,GAAU,KACN,GAAIjC,EAAM,CACN,MAAMc,EAAY6B,IAClBC,EAAW9B,GAEX+B,IAEIN,KAAwC,IAA7BF,IAAkBC,SAC7BQ,KACAN,GAA2B,QAG/B,MAAMO,EAAUC,YAAW,KACvBN,EAAoB,MAAM,GAC3B,KAEH,MAAO,IAAMO,aAAaF,EAC9B,CAAO,CACHX,IAEIG,KAAWF,IAAkBC,OAAS,IACtCE,GAA2B,UAC3BC,MAGJ,MAAMM,EAAUC,YAAW,KACnBX,IAAkBC,OAAS,GAC3BI,EAAoB,SACxB,GACD,KAEH,MAAO,IAAMO,aAAaF,EAC9B,IAED,CAAC/C,IAGJiC,GAAU,KACN,GAAKjC,EAGL,OADAkD,SAASC,iBAAiB,YAAaC,IAAyB,GACzD,KACHF,SAASG,oBACL,YACAD,IACA,EACH,CACJ,GAEF,CAACpD,IAKJ,MAAM4C,EAAcU,IAChBlC,EAAQmC,QAAUD,EAClBvC,EAAcuC,EAAK,EAMjBf,EAAQ,IAAM,sBAAsBiB,KAAKC,UAAUC,WAEnDvB,EAAiB,IACfe,UAAYjD,EACLiD,SAASS,eAAe1D,GACxBiD,SAEAA,SAASU,KAET,KAITjB,EAAiB,IACZN,IAAkBC,OAAS,EAGhCJ,EAAkC,KACpC,MAAM2B,EAAgBX,SAASY,gBAAgBC,YAEzCC,EADcC,OAAOC,WACUL,EAErCX,SAASY,gBAAgBK,MAAMC,YAC3BrC,EAAcsC,OAAOC,eACrB,GAAGN,MACN,EAMCtB,EAAuB6B,IACzB,MAAMC,EAA6BtB,SAASU,KAAKa,UAAUC,SACvD3C,EAAcsC,OAAOM,kBAGV,QAAXJ,GAAqBC,EAEH,WAAXD,GAAuBC,GAC9BtB,SAASU,KAAKa,UAAUG,OACpB7C,EAAcsC,OAAOM,kBAHzBzB,SAASU,KAAKa,UAAUI,IAAI9C,EAAcsC,OAAOM,iBAKrD,EAGEtC,EAAkB,KACpB,MAAMyC,EAAO5B,SAASU,KAAKmB,QAAQC,qBACnC,OAAOF,EAAOA,EAAKG,MAAM,KAAO,EAAE,EAGhCpC,EAAa,KACf,MAAMqC,EAAQ7C,IACda,SAASU,KAAKmB,QAAQC,qBAAuB,IAAIE,EAAOlE,GAAKmE,KAAK,IAAI,EAGpE/C,EAAgB,KAClB,MAAM8C,EAAQ7C,IACda,SAASU,KAAKmB,QAAQC,qBAAuBE,EACxCE,QAAQC,GAAMA,IAAMrE,IACpBmE,KAAK,IAAI,EAaZ3C,GAA8B+B,IAChC,IAAKhC,IACD,OAGJ,MAAM+C,EAAiBpC,SAASU,KAAKa,UAAUC,SAC3C3C,EAAcsC,OAAOkB,wBAGV,QAAXhB,GAAqBe,EAIH,WAAXf,GAAuBe,GAC9BpC,SAASU,KAAKa,UAAUG,OACpB7C,EAAcsC,OAAOkB,wBALzBrC,SAASU,KAAKa,UAAUI,IACpB9C,EAAcsC,OAAOkB,uBAM7B,EAGEzC,GAAqB,KACvB,MAAM0C,EAAYtC,SAASU,KAAKO,MAC1BsB,EAAUD,EAAUE,IAAMF,EAAUE,IAAMzB,OAAOwB,QAAU,KAEjEvC,SAASU,KAAKO,MAAMC,YAAYrC,EAAcsC,OAAOoB,QAASA,EAAQ,EAGpEhD,GAAmC,KACrC,IAAKF,IACD,OAGJ,MAAMkD,EAAUvC,SAASU,KAAKO,MAAMwB,iBAChC5D,EAAcsC,OAAOoB,SAEzBG,uBAAsB,KAClB3B,OAAO4B,SAAS,CACZH,IAAKI,WAAWL,IAClB,GACJ,EAMArC,GAA2B2C,UAC7B,MAAMC,EAAiC,QAArBC,EAAAvF,aAAY,EAAZA,EAAc6C,eAAO,IAAA0C,EAAAA,EAAIzE,EAAW+B,QAChD2C,EAAU1E,EAAW+B,QAC3B,IAAKyC,EAED,YADA1E,EAAwBiC,SAAU,GAItC,MAAM4C,EAASJ,EAAEI,OACXC,EAAmBF,IAAYC,EAC/BE,EAAqBL,IAAcG,EACnCG,EAAyBN,EAAUtB,SAASyB,GAGlD7E,EAAwBiC,SACnB6C,IAAqBC,GAAsBC,EAAuB,EAGrEC,GAAsBC,UACxB,MAAMR,EAAiC,QAArBC,EAAAvF,aAAY,EAAZA,EAAc6C,eAAO,IAAA0C,EAAAA,EAAIzE,EAAW+B,QAChD2C,EAAU1E,EAAW+B,QAC3B,IAAKyC,EAED,YADA1E,EAAwBiC,SAAU,GAItC,MAAM4C,EAASK,EAAML,OACfC,EAAmBF,IAAYC,EAC/BE,EAAqBL,IAAcG,EACnCG,EAAyBN,EAAUtB,SAASyB,IAK7CC,IAJsBC,GAAsBC,IAK5ChF,EAAwBiC,UACzBrD,IACAI,IAEAkG,EAAMC,iBACNvG,KAGJoB,EAAwBiC,SAAU,CAAK,EAsC3C,OAAO5C,EACD+F,EAASC,aAbXC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKxF,EACLd,GAAIgB,EAAa,cACJA,EACbuF,UAAWC,EAAKC,EAAalH,GAAQmH,IACjCzF,EAAU,CACdyC,MAAOxC,WAENxB,GA3BLyG,EAACQ,EAAY,CAAC3G,GAAIS,EAAMf,SACpByG,SACIG,IAAKvF,EAAU,cACH,kBACZwF,UAAWC,EACPI,EACArH,EAAOsH,EAAqBC,EAC5BzG,GAAa0G,EACbpH,GAAkBqH,EAClBpH,GAAqBqH,GAEzBC,QAASpB,GAAkBpG,SAE1BA,SAmBkCQ,GACzC,IAAI,EAYDiH,EAAWC,GAEhBjB,EAACkB,EAAY,CAAA3H,SACTyG,EAAC7G,EAAgB8G,OAAAC,OAAA,CAAA,EAAKe"}

package/overlay/overlay.styles.d.ts

@@ -1,10 +1,19 @@
-interface StyleProps {
-    $show: boolean;
-    $backgroundBlur?: boolean | undefined;
-    $disableTransition?: boolean | undefined;
-    $zIndex?: number | undefined;
-    $stacked?: boolean | undefined;
-}
-export declare const Root: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export {};
+export declare const tokens: {
+    readonly global: {
+        readonly scrollY: "--fds-internal-overlay-body-scrollY";
+        readonly scrollbarWidth: "--fds-internal-overlay-body-scrollbarWidth";
+        readonly overlayOpenClass: "lifesg-ds-overlay-open";
+        readonly overlayScrollLockClass: "lifesg-ds-overlay-scroll-lock";
+    };
+    readonly root: {
+        readonly zIndex: "--fds-internal-overlay-root-zIndex";
+    };
+};
+export declare const root: import("@linaria/core").LinariaClassName;
+export declare const rootShow: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperStacked: import("@linaria/core").LinariaClassName;
+export declare const wrapperBackgroundBlur: import("@linaria/core").LinariaClassName;
+export declare const wrapperShow: import("@linaria/core").LinariaClassName;
+export declare const wrapperHide: import("@linaria/core").LinariaClassName;
+export declare const wrapperDisableTransition: import("@linaria/core").LinariaClassName;

package/overlay/overlay.styles.js

@@ -1,40 +1,2 @@
-import i,{css as t}from"styled-components";import{Colour as e}from"../theme/index.js";const o=i.div`
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 0;
-    width: 0;
-    visibility: hidden;
-    z-index: ${i=>i.$zIndex};
-
-    ${i=>{if(i.$show)return t`
-                height: 100%;
-                width: 100vw;
-                visibility: visible;
-            `}}
-`,n=i.div`
-    position: absolute;
-    left: 0;
-    top: 0;
-    background-color: ${i=>i.$stacked?e["overlay-subtle"]:e["overlay-strong"]};
-    backdrop-filter: ${i=>(i=>{let t="";return i&&(t+="blur(10px)"),t.length>0?t:"none"})(i.$backgroundBlur)};
-    transition: opacity 200ms ease;
-
-    ${i=>{let e="";return i.$show?e+=t`
-                visibility: visible;
-                opacity: 1;
-                pointer-events: auto;
-                height: 100%;
-                width: 100vw;
-            `:e+=t`
-                visibility: hidden;
-                opacity: 0;
-                transition-delay: ${i.$disableTransition?"0ms":"400ms"};
-                pointer-events: none;
-                height: 0;
-                width: 0;
-            `,i.$disableTransition&&(e+=t`
-                transition: none;
-            `),e}};
-`;export{o as Root,n as Wrapper};
+import"./overlay.styles_12wym18.css";const l={global:{scrollY:"--fds-internal-overlay-body-scrollY",scrollbarWidth:"--fds-internal-overlay-body-scrollbarWidth",overlayOpenClass:"lifesg-ds-overlay-open",overlayScrollLockClass:"lifesg-ds-overlay-scroll-lock"},root:{zIndex:"--fds-internal-overlay-root-zIndex"}},o="r1042j6c",r="rceie2f",s="w1q7jcf6",e="w14rsmxt",a="w1xh3xyq",t="wv8m6sc",c="w1q7bprp",y="w1ttt09o";export{o as root,r as rootShow,l as tokens,s as wrapper,a as wrapperBackgroundBlur,y as wrapperDisableTransition,c as wrapperHide,t as wrapperShow,e as wrapperStacked};
 //# sourceMappingURL=overlay.styles.js.map

package/overlay/overlay.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.styles.js","sources":["../../src/overlay/overlay.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $show: boolean;\n    $backgroundBlur?: boolean | undefined;\n    $disableTransition?: boolean | undefined;\n    $zIndex?: number | undefined;\n    $stacked?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getBackdropFilter = (blur: boolean | undefined) => {\n    let styleString = \"\";\n\n    if (blur) {\n        styleString += \"blur(10px)\";\n    }\n\n    return styleString.length > 0 ? styleString : \"none\";\n};\n\nexport const Root = styled.div<StyleProps>`\n    position: fixed;\n    left: 0;\n    top: 0;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n    z-index: ${(props) => props.$zIndex};\n\n    ${(props) => {\n        if (props.$show) {\n            return css`\n                height: 100%;\n                width: 100vw;\n                visibility: visible;\n            `;\n        }\n    }}\n`;\n\nexport const Wrapper = styled.div<StyleProps>`\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: ${(props) =>\n        props.$stacked ? Colour[\"overlay-subtle\"] : Colour[\"overlay-strong\"]};\n    backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)};\n    transition: opacity 200ms ease;\n\n    ${(props) => {\n        let customStyles = \"\";\n        if (props.$show) {\n            customStyles += css`\n                visibility: visible;\n                opacity: 1;\n                pointer-events: auto;\n                height: 100%;\n                width: 100vw;\n            `;\n        } else {\n            customStyles += css`\n                visibility: hidden;\n                opacity: 0;\n                transition-delay: ${props.$disableTransition ? \"0ms\" : \"400ms\"};\n                pointer-events: none;\n                height: 0;\n                width: 0;\n            `;\n        }\n        if (props.$disableTransition) {\n            customStyles += css`\n                transition: none;\n            `;\n        }\n\n        return customStyles;\n    }};\n`;\n"],"names":["Root","styled","div","props","$zIndex","$show","css","Wrapper","$stacked","Colour","blur","styleString","length","getBackdropFilter","$backgroundBlur","customStyles","$disableTransition"],"mappings":"sFAkBA,MAUaA,EAAOC,EAAOC,GAAe;;;;;;;eAO1BC,GAAUA,EAAMC;;MAEzBD,IACC,GAAIA,EAAME,MACN,OAAOC,CAAG;;;;aAKd;EAIKC,EAAUN,EAAOC,GAAe;;;;wBAIpBC,GACjBA,EAAMK,SAAWC,EAAO,kBAAoBA,EAAO;uBACnCN,GApCE,CAACO,IACvB,IAAIC,EAAc,GAMlB,OAJID,IACAC,GAAe,cAGZA,EAAYC,OAAS,EAAID,EAAc,MAAM,EA6BtBE,CAAkBV,EAAMW;;;MAGnDX,IACC,IAAIY,EAAe,GAyBnB,OAxBIZ,EAAME,MACNU,GAAgBT,CAAG;;;;;;cAQnBS,GAAgBT,CAAG;;;oCAGKH,EAAMa,mBAAqB,MAAQ;;;;cAM3Db,EAAMa,qBACND,GAAgBT,CAAG;;eAKhBS,CAAY;"}
+{"version":3,"file":"overlay.styles.js","sources":["../../src/overlay/overlay.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\nexport const tokens = {\n    global: {\n        scrollY: \"--fds-internal-overlay-body-scrollY\",\n        scrollbarWidth: \"--fds-internal-overlay-body-scrollbarWidth\",\n        overlayOpenClass: \"lifesg-ds-overlay-open\",\n        overlayScrollLockClass: \"lifesg-ds-overlay-scroll-lock\",\n    },\n    root: {\n        zIndex: \"--fds-internal-overlay-root-zIndex\",\n    },\n} as const;\n\nexport const root = css`\n    position: fixed;\n    left: 0;\n    top: 0;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n    z-index: var(${tokens.root.zIndex});\n\n    :global() {\n        .${tokens.global.overlayOpenClass} {\n            padding-right: var(${tokens.global.scrollbarWidth}, 0) !important;\n            overflow: hidden;\n            scrollbar-width: none;\n            -ms-overflow-style: none;\n        }\n\n        .${tokens.global.overlayOpenClass}::-webkit-scrollbar {\n            display: none;\n        }\n\n        .${tokens.global.overlayScrollLockClass} {\n            position: fixed;\n            top: var(${tokens.global.scrollY}, 0);\n            bottom: 0;\n        }\n    }\n`;\n\nexport const rootShow = css`\n    height: 100%;\n    width: 100vw;\n    visibility: visible;\n`;\n\nexport const wrapper = css`\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    backdrop-filter: none;\n    transition: opacity 200ms ease;\n`;\n\nexport const wrapperStacked = css`\n    background-color: ${Colour[\"overlay-subtle\"]};\n`;\n\nexport const wrapperBackgroundBlur = css`\n    backdrop-filter: blur(10px);\n`;\n\nexport const wrapperShow = css`\n    visibility: visible;\n    opacity: 1;\n    pointer-events: auto;\n    height: 100%;\n    width: 100vw;\n`;\n\nexport const wrapperHide = css`\n    visibility: hidden;\n    opacity: 0;\n    transition-delay: 400ms;\n    pointer-events: none;\n    height: 0;\n    width: 0;\n`;\n\nexport const wrapperDisableTransition = css`\n    transition: none;\n    transition-delay: 0ms;\n`;\n"],"names":["tokens","global","scrollY","scrollbarWidth","overlayOpenClass","overlayScrollLockClass","root","zIndex","rootShow","wrapper","wrapperStacked","wrapperBackgroundBlur","wrapperShow","wrapperHide","wrapperDisableTransition"],"mappings":"4DAIO,MAAMA,EAAS,CAClBC,OAAQ,CACJC,QAAS,sCACTC,eAAgB,6CAChBC,iBAAkB,yBAClBC,uBAAwB,iCAE5BC,KAAM,CACFC,OAAQ,uCAIHD,EAAI,WA6BJE,EAAQ,UAMRC,EAAO,WASPC,EAAc,WAIdC,EAAqB,WAIrBC,EAAW,UAQXC,EAAW,WASXC,EAAwB"}

package/overlay/overlay.styles_12wym18.css

@@ -0,0 +1,8 @@
+@layer fds{.r1042j6c{position:fixed;left:0;top:0;height:0;width:0;visibility:hidden;z-index:var(--fds-internal-overlay-root-zIndex);}.lifesg-ds-overlay-open {padding-right:var(--fds-internal-overlay-body-scrollbarWidth, 0)!important;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;}.lifesg-ds-overlay-open::-webkit-scrollbar {display:none;}.lifesg-ds-overlay-scroll-lock {position:fixed;top:var(--fds-internal-overlay-body-scrollY, 0);bottom:0;}
+.rceie2f{height:100%;width:100vw;visibility:visible;}
+.w1q7jcf6{position:absolute;left:0;top:0;background-color:var(--fds-colour-overlay-strong);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease;}
+.w14rsmxt{background-color:var(--fds-colour-overlay-subtle);}
+.w1xh3xyq{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
+.wv8m6sc{visibility:visible;opacity:1;pointer-events:auto;height:100%;width:100vw;}
+.w1q7bprp{visibility:hidden;opacity:0;transition-delay:400ms;pointer-events:none;height:0;width:0;}
+.w1ttt09o{-webkit-transition:none;transition:none;transition-delay:0ms;}}