npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1629) hide show

package/cjs/otp-verification/thumbnail/thumbnail.styles_shqylh.css ADDED Viewed

@@ -0,0 +1,3 @@
+@layer fds{.tzhqtbi{width:120px;height:120px;}:where(body.fds-breakpoint-sm-max) .tzhqtbi{width:64px;height:64px;}
+.p19527g1 .background-circle{fill:var(--fds-colour-bg-stronger);}.p19527g1 .primary-path{fill:var(--fds-colour-icon-primary);}.p19527g1 .validation-icon{fill:var(--fds-colour-bg-available);}.p19527g1 .accent-light{fill:var(--fds-colour-bg-selected-stronger);}
+.e1m2pw4s .background-circle{fill:var(--fds-colour-bg-stronger);}.e1m2pw4s .primary-path{fill:var(--fds-colour-icon-primary);}.e1m2pw4s .validation-icon{fill:var(--fds-colour-bg-available);}.e1m2pw4s .accent-light-3{fill:var(--fds-colour-icon-primary-subtle);}.e1m2pw4s .accent-light-4{fill:var(--fds-colour-icon-primary-subtlest);}}

package/cjs/otp-verification/verification-section.js CHANGED Viewed

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

package/cjs/otp-verification/verification-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verification-section.js","sources":["../../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { ~~FormErrorMessage~~ } from \"../~~form/form-label~~\";\nimport { ~~InputGroup~~ } from \"../~~input~~-~~group~~\";\nimport { ~~concatIds~~ } from \"../~~shared/accessibility~~\";\nimport { ~~useMaxWidthMediaQuery~~ } from \"../~~theme~~\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { 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 ~~isMobile = useMaxWidthMediaQuery(\"sm\");\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":["id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","~~thumbnailSize","useMaxWidthMediaQuery","~~internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","~~VerificationSectionWrapper~~","~~role~~","~~_jsx~~","children","~~EmailThumbnail~~","~~width~~","~~height","~~PhoneThumbnail","~~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":"~~i3BAgBmC~~,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,~~MACMC~~,~~EADWC,EAAAA,sBAAsB,MACN,GAAK,IAChCC,~~EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,~~iBAsBzB~~,OACIM,EAAAA,~~KAACC~~,~~EAAAA~~,~~2BAA0B~~,~~CACvBvB,~~GAAIA,gBACSC,~~EACbuB~~,KAAK,~~kBAvBJrB~~,EAGDsB,~~MAAA~~,MAAA,CAAA,eAAA,~~EAAAC~~,SACc,~~UAATxB~~,~~EACGuB~~,~~MAACE~~,EAAAA,eAAc,~~CACXC~~,~~MAAOd~~,~~EACPe,OAAQf,IAGZW,~~EAAAA,~~IAACK~~,EAAAA,~~gBACGF~~,~~MAAOd~~,~~EACPe~~,~~OAAQf~~,~~MAZY~~,~~KA0BhCQ~~,~~EAAAA~~,~~KAACS~~,~~EAAAA~~,~~iBAAgB~~,~~CAAAL,~~SAAA,~~CACbJ~~,OAAA,MAAA,CAAAI,SAAA,~~CACID~~,EAAAA,~~IAACO~~,~~EAAAA~~,~~WAAWC~~,~~OAAM,CACdC,~~OAAO,~~WACPlC~~,~~GAAIkB~~,EAAO,~~cAEPjB~~,EAAa,GAAGA,~~eAAqBkC~~,~~EAAST~~,~~SAGjDtB~~,IAELqB,EAAAA,~~IAACO~~,EAAAA,WAAWC,OAAM,CACdC,OAAO,~~UACPlC~~,~~GAAImB~~,~~EAAS~~,~~cAETlB,~~EAAa,GAAGA,~~iBAAuBkC~~,~~EAAST~~,~~SAGnDrB~~,~~OAGTiB~~,EAAAA,~~sBACIA~~,EAAAA,~~KAACc~~,~~gCACGX~~,EAAAA,~~IAACY~~,EAAAA,~~WAAU~~,~~CACPrC~~,GAAIA,EAAK,GAAGA,~~sBAAoBmC~~,EAAS,~~cAErClC~~,EACM,GAAGA,~~sBACHkC~~,EAEVG,~~MAAOhC~~,~~EACPiC~~,SAAWC,~~GAAMjC~~,aAAU,EAAVA,~~EAAaiC~~,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,~~CACHzC~~,KAAM,~~QACN0C~~,WAAY,CACRN,MAAO,~~GAAG1B~~,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,~~SACL2C~~,~~QAASlC~~,EAAc,~~kBACNO~~,EAAO,~~mBACN4B~~,EAAAA,~~UACd3B~~,EACAC,~~EACAT~~,~~EAAiBU~~,~~OAAgBc~~,~~oBAErBxB~~,EAAc,iBACf,IAEnBc,EAAAA,~~IAACsB~~,EAAAA,~~aAAY~~,~~CACT/C~~,GAAIA,EAAK,GAAGA,~~uBAAqBmC~~,~~EACjCjC~~,KAAK,SAAQ,cAETD,EACM,GAAGA,~~uBACHkC~~,EAEVa,QAAStC,EACTuC,~~QAASzC,EACT0C,~~UAAU,QACVC,~~UAAW7C~~,GAA8B,IAAnBA,~~EAAQ8C~~,~~OAAY1B~~,~~UAExClB~~,GAAmB,cAG5BG,GACGc,EAAAA,~~IAAC4B~~,EAAAA,~~iBAAgB~~,~~CACbrD~~,~~GAAIqB~~,~~gBAEApB~~,EACM,GAAGA,~~sBACHkC~~,EAEVX,KAAK,~~QAAOE~~,~~SAEXf~~,OAIZF,~~EAAU6C~~,WACPhC,EAAAA,~~KAACiC~~,~~gBAAa~~,~~CACVvD~~,GAAIA,EAAK,GAAGA,~~mBAAiBmC~~,EAAS,~~cAElClC~~,EAAa,GAAGA,~~mBAAyBkC~~,~~EAAST~~,SAAA,CAAA,~~iBAGvCjB~~,~~EAAU+C~~,~~qBAIZ~~"}
1	+ {"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":["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":"knBAUmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAYzB,OACIM,EAAAA,KAAA,MAAA,CACIpB,GAAIA,gBACSC,EACboB,KAAK,QACLC,UAAWC,6BAAiCC,SAAA,CAd3CrB,EAGDsB,EAAAA,IAAA,MAAA,CAAA,eAAA,EAAAD,SACc,UAATtB,EAAmBuB,EAAAA,IAACC,EAAAA,eAAc,CAAA,GAAMD,EAAAA,IAACE,EAAAA,eAAc,CAAA,KAJ5B,KAiBhCP,EAAAA,KAAA,MAAA,CAAKE,UAAWM,mBAAuBJ,SAAA,CACnCJ,OAAA,MAAA,CAAAI,SAAA,CACIC,EAAAA,IAACI,aAAWC,QACRC,OAAO,WACP/B,GAAIgB,EAAO,cAEPf,EAAa,GAAGA,eAAqB+B,EAASR,SAGjDpB,IAELqB,EAAAA,IAACI,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACP/B,GAAIiB,gBAEAhB,EAAa,GAAGA,iBAAuB+B,EAASR,SAGnDnB,OAGTe,EAAAA,KAAA,MAAA,CAAAI,SAAA,CACIJ,EAAAA,KAAA,MAAA,CAAKE,UAAWW,EAAAA,mBAAyBT,SAAA,CACrCC,EAAAA,IAACS,aAAU,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,EAAAA,UACd1B,EACAC,EACAP,EAAiBQ,OAAgBa,oBAErBrB,EAAc,iBACf,IAEnBc,EAAAA,IAACmB,EAAAA,OAAM,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,EAAAA,aAAmB1B,UAE5BhB,GAAmB,cAG5BG,GACGc,EAAAA,IAAC0B,EAAAA,kBACGnD,GAAImB,EAAa,cAEblB,EACM,GAAGA,sBACH+B,EAEVX,KAAK,QAAOG,SAEXb,OAIZF,EAAU2C,WACPhC,EAAAA,KAACS,EAAAA,WAAWC,OAAM,CACd9B,GAAIA,EAAK,GAAGA,mBAAiBgC,EAAS,cAElC/B,EAAa,GAAGA,mBAAyB+B,EAE7CV,UAAW+B,EAAAA,cAAoB7B,SAAA,CAAA,iBAEhBf,EAAU6C,qBAInC"}

package/cjs/otp-verification/verification-section.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./verification-section.styles_x8jj.css");exports.resendMessage="rl8lhyn",exports.sectionContainer="s1h7j64h",exports.verificationSectionWrapper="v1j5kvy",exports.verifyButton="v61u1jj",exports.verifyInputWrapper="v1ob0u9j";
2	+ //# sourceMappingURL=verification-section.styles.js.map

package/cjs/otp-verification/verification-section.styles.js.map ADDED Viewed

@@ -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":[],"mappings":"qHAyB0B,mCANG,8CAfU,+BA+Bd,qCANM"}

package/cjs/otp-verification/verification-section.styles_x8jj.css ADDED Viewed

@@ -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/cjs/overlay/overlay.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("clsx"),o=require("react"),s=require("react-dom");require("../theme/theme-provider/index.js");var n=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./overlay.styles.js"),u=require("./use-floating-context.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(r),m=d(s);const y=({show:r=!1,rootId:s,onOverlayClick:d,children:y,backgroundOpacity:v,backgroundBlur:p=!0,disableTransition:g=!1,enableOverlayClick:f=!1,zIndex:h,id:b,containerRef:j})=>{const[k,q]=o.useState(null),[w,x]=o.useState(),O=a.useId(),L=t.useFloatingNodeId(),S=o.useRef(),C=o.useRef(!1),P=o.useRef(null),T=o.useRef(null),E=b?`lifesg-ds-overlay-root-${b}`:"lifesg-ds-overlay-root",I=null!=h?h:w?99999:99998,{themeProps:F,themeStyle:D}=n.useInheritedThemeScope(r);u.useFloatingParent(I),l.useApplyStyle(P,{[i.tokens.root.zIndex]:I}),o.useEffect((()=>(W(),q(N()),()=>{H(),z().length<1&&(B()&&(V("remove"),J()),Y("remove"))})),[]),o.useEffect((()=>{if(r){const e=A();R(e),$(),B()&&1===z().length&&(G(),V("add"));const t=setTimeout((()=>{Y("add")}),200);return()=>clearTimeout(t)}{H(),B()&&z().length<1&&(V("remove"),J());const e=setTimeout((()=>{z().length<1&&Y("remove")}),200);return()=>clearTimeout(e)}}),[r]),o.useEffect((()=>{if(r)return document.addEventListener("mousedown",K,!0),()=>{document.removeEventListener("mousedown",K,!0)}}),[r]);const R=e=>{S.current=e,x(e)},B=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),N=()=>document&&s?document.getElementById(s):document?document.body:null,A=()=>z().length>0,W=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(i.tokens.global.scrollbarWidth,`${t}px`)},Y=e=>{const t=document.body.classList.contains(i.tokens.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayOpenClass):document.body.classList.add(i.tokens.global.overlayOpenClass)},z=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},$=()=>{const e=z();document.body.dataset.lifesgDsOverlayOrder=[...e,O].join(",")},H=()=>{const e=z();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==O)).join(",")},V=e=>{if(!B())return;const t=document.body.classList.contains(i.tokens.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayScrollLockClass):document.body.classList.add(i.tokens.global.overlayScrollLockClass)},G=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(i.tokens.global.scrollY,t)},J=()=>{if(!B())return;const e=document.body.style.getPropertyValue(i.tokens.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},K=e=>{var t;const r=null!==(t=null==j?void 0:j.current)&&void 0!==t?t:T.current,o=T.current;if(!r)return void(C.current=!1);const s=e.target,n=o===s,l=r===s,a=r.contains(s);C.current=!n&&(l||a)},M=e=>{var t;const r=null!==(t=null==j?void 0:j.current)&&void 0!==t?t:T.current,o=T.current;if(!r)return void(C.current=!1);const s=e.target,n=o===s,l=r===s,a=r.contains(s);!n&&(l||a)||C.current||!d||!f||(e.preventDefault(),d()),C.current=!1};return k?m.default.createPortal(e.jsx("div",Object.assign({ref:P,id:E,"data-testid":E,className:c.default(i.root,r&&i.rootShow)},F,{style:D,children:y&&e.jsx(t.FloatingNode,{id:L,children:e.jsx("div",{ref:T,"data-testid":"overlay-wrapper",className:c.default(i.wrapper,r?i.wrapperShow:i.wrapperHide,w&&i.wrapperStacked,p&&i.wrapperBackgroundBlur,g&&i.wrapperDisableTransition),onClick:M,children:y})})})),k):null};exports.Overlay=r=>e.jsx(t.FloatingTree,{children:e.jsx(y,Object.assign({},r))});
+"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("clsx"),o=require("react"),s=require("react-dom");require("../theme/theme-provider/index.js");var n=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./overlay.styles.js"),u=require("./use-floating-context.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(r),m=d(s);const y=({show:r=!1,rootId:s,onOverlayClick:d,children:y,backgroundBlur:v=!0,disableTransition:p=!1,enableOverlayClick:g=!1,zIndex:f,id:h,containerRef:b})=>{const[j,k]=o.useState(null),[q,w]=o.useState(),x=a.useId(),O=t.useFloatingNodeId(),L=o.useRef(),S=o.useRef(!1),C=o.useRef(null),P=o.useRef(null),T=h?`lifesg-ds-overlay-root-${h}`:"lifesg-ds-overlay-root",E=null!=f?f:q?99999:99998,{themeProps:I,themeStyle:F}=n.useInheritedThemeScope(r);u.useFloatingParent(E),l.useApplyStyle(C,{[i.tokens.root.zIndex]:E}),o.useEffect((()=>(A(),k(B()),()=>{$(),Y().length<1&&(R()&&(H("remove"),G()),W("remove"))})),[]),o.useEffect((()=>{if(r){const e=N();D(e),z(),R()&&1===Y().length&&(V(),H("add"));const t=setTimeout((()=>{W("add")}),200);return()=>clearTimeout(t)}{$(),R()&&Y().length<1&&(H("remove"),G());const e=setTimeout((()=>{Y().length<1&&W("remove")}),200);return()=>clearTimeout(e)}}),[r]),o.useEffect((()=>{if(r)return document.addEventListener("mousedown",J,!0),()=>{document.removeEventListener("mousedown",J,!0)}}),[r]);const D=e=>{L.current=e,w(e)},R=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),B=()=>document&&s?document.getElementById(s):document?document.body:null,N=()=>Y().length>0,A=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(i.tokens.global.scrollbarWidth,`${t}px`)},W=e=>{const t=document.body.classList.contains(i.tokens.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayOpenClass):document.body.classList.add(i.tokens.global.overlayOpenClass)},Y=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},z=()=>{const e=Y();document.body.dataset.lifesgDsOverlayOrder=[...e,x].join(",")},$=()=>{const e=Y();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==x)).join(",")},H=e=>{if(!R())return;const t=document.body.classList.contains(i.tokens.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayScrollLockClass):document.body.classList.add(i.tokens.global.overlayScrollLockClass)},V=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(i.tokens.global.scrollY,t)},G=()=>{if(!R())return;const e=document.body.style.getPropertyValue(i.tokens.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},J=e=>{var t;const r=null!==(t=null==b?void 0:b.current)&&void 0!==t?t:P.current,o=P.current;if(!r)return void(S.current=!1);const s=e.target,n=o===s,l=r===s,a=r.contains(s);S.current=!n&&(l||a)},K=e=>{var t;const r=null!==(t=null==b?void 0:b.current)&&void 0!==t?t:P.current,o=P.current;if(!r)return void(S.current=!1);const s=e.target,n=o===s,l=r===s,a=r.contains(s);!n&&(l||a)||S.current||!d||!g||(e.preventDefault(),d()),S.current=!1};return j?m.default.createPortal(e.jsx("div",Object.assign({ref:C,id:T,"data-testid":T,className:c.default(i.root,r&&i.rootShow)},I,{style:F,children:y&&e.jsx(t.FloatingNode,{id:O,children:e.jsx("div",{ref:P,"data-testid":"overlay-wrapper",className:c.default(i.wrapper,r?i.wrapperShow:i.wrapperHide,q&&i.wrapperStacked,v&&i.wrapperBackgroundBlur,p&&i.wrapperDisableTransition),onClick:K,children:y})})})),j):null};exports.Overlay=r=>e.jsx(t.FloatingTree,{children:e.jsx(y,Object.assign({},r))});
 //# sourceMappingURL=overlay.js.map

package/cjs/overlay/overlay.js.map CHANGED Viewed

	@@ -1 +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 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 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 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 }, []);\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 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\nexport const Overlay = (props: OverlayProps) => {\n return (\n <FloatingTree>\n <OverlayComponent {...props} />\n </FloatingTree>\n );\n};\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","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","props","FloatingTree"],"mappings":"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"}
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 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 }, []);\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 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\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","props","FloatingTree"],"mappings":"k1BAgBA,MAAMA,EAAmB,EACrBC,QAAO,EACPC,SACAC,iBACAC,WACAC,kBAAiB,EACjBC,qBAAoB,EACpBC,sBAAqB,EACrBC,OAAQC,EACRC,KACAC,mBAKA,MAAOC,EAAaC,GAAkBC,EAAAA,SAA6B,OAC5DC,EAAWC,GAAiBF,aAC7BG,EAAMC,EAAAA,QACNC,EAASC,EAAAA,oBAETC,EAAUC,EAAAA,SAEVC,EAA0BD,EAAAA,QAAO,GACjCE,EAAUF,EAAAA,OAAuB,MACjCG,EAAaH,EAAAA,OAAuB,MAEpCI,EAAgBhB,EAChB,0BAA0BA,IAC1B,yBACAF,EAASC,QAAAA,EAAiBM,EAAY,MAAQ,OAC9CY,WAAEA,EAAUC,WAAEA,GAAeC,EAAAA,uBAAuB5B,GAE1D6B,EAAAA,kBAAkBtB,GAElBuB,EAAAA,cAAcP,EAAS,CAAE,CAACQ,EAAAA,OAAcC,KAAKzB,QAASA,IAKtD0B,EAAAA,WAAU,KACNC,IACAtB,EAAeuB,KAER,KACHC,IAEIC,IAAkBC,OAAS,IACvBC,MACAC,EAA2B,UAC3BC,KAGJC,EAAoB,UACxB,IAEL,IAEHT,EAAAA,WAAU,KACN,GAAIjC,EAAM,CACN,MAAMc,EAAY6B,IAClBC,EAAW9B,GAEX+B,IAEIN,KAAwC,IAA7BF,IAAkBC,SAC7BQ,IACAN,EAA2B,QAG/B,MAAMO,EAAUC,YAAW,KACvBN,EAAoB,MAAM,GAC3B,KAEH,MAAO,IAAMO,aAAaF,EAC9B,CAAO,CACHX,IAEIG,KAAWF,IAAkBC,OAAS,IACtCE,EAA2B,UAC3BC,KAGJ,MAAMM,EAAUC,YAAW,KACnBX,IAAkBC,OAAS,GAC3BI,EAAoB,SACxB,GACD,KAEH,MAAO,IAAMO,aAAaF,EAC9B,IACD,CAAC/C,IAGJiC,EAAAA,WAAU,KACN,GAAKjC,EAGL,OADAkD,SAASC,iBAAiB,YAAaC,GAAyB,GACzD,KACHF,SAASG,oBACL,YACAD,GACA,EACH,CACJ,GACF,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,EAAAA,OAAcsC,OAAOC,eACrB,GAAGN,MACN,EAMCtB,EAAuB6B,IACzB,MAAMC,EAA6BtB,SAASU,KAAKa,UAAUC,SACvD3C,EAAAA,OAAcsC,OAAOM,kBAGV,QAAXJ,GAAqBC,EAEH,WAAXD,GAAuBC,GAC9BtB,SAASU,KAAKa,UAAUG,OACpB7C,EAAAA,OAAcsC,OAAOM,kBAHzBzB,SAASU,KAAKa,UAAUI,IAAI9C,EAAAA,OAAcsC,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,EAA8B+B,IAChC,IAAKhC,IACD,OAGJ,MAAM+C,EAAiBpC,SAASU,KAAKa,UAAUC,SAC3C3C,EAAAA,OAAcsC,OAAOkB,wBAGV,QAAXhB,GAAqBe,EAIH,WAAXf,GAAuBe,GAC9BpC,SAASU,KAAKa,UAAUG,OACpB7C,EAAAA,OAAcsC,OAAOkB,wBALzBrC,SAASU,KAAKa,UAAUI,IACpB9C,EAAAA,OAAcsC,OAAOkB,uBAM7B,EAGEzC,EAAqB,KACvB,MAAM0C,EAAYtC,SAASU,KAAKO,MAC1BsB,EAAUD,EAAUE,IAAMF,EAAUE,IAAMzB,OAAOwB,QAAU,KAEjEvC,SAASU,KAAKO,MAAMC,YAAYrC,EAAAA,OAAcsC,OAAOoB,QAASA,EAAQ,EAGpEhD,EAAmC,KACrC,IAAKF,IACD,OAGJ,MAAMkD,EAAUvC,SAASU,KAAKO,MAAMwB,iBAChC5D,EAAAA,OAAcsC,OAAOoB,SAEzBG,uBAAsB,KAClB3B,OAAO4B,SAAS,CACZH,IAAKI,WAAWL,IAClB,GACJ,EAMArC,EAA2B2C,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,EAAsBC,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,UAASC,aAbXC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKxF,EACLd,GAAIgB,EAAa,cACJA,EACbuF,UAAWC,EAAAA,QAAKC,EAAAA,KAAalH,GAAQmH,aACjCzF,EAAU,CACdyC,MAAOxC,WAENxB,GA3BLyG,EAAAA,IAACQ,EAAAA,aAAY,CAAC3G,GAAIS,EAAMf,SACpByG,EAAAA,WACIG,IAAKvF,EAAU,cACH,kBACZwF,UAAWC,EAAAA,QACPI,EAAAA,QACArH,EAAOsH,EAAAA,YAAqBC,EAAAA,YAC5BzG,GAAa0G,EAAAA,eACbpH,GAAkBqH,wBAClBpH,GAAqBqH,EAAAA,0BAEzBC,QAASpB,EAAkBpG,SAE1BA,SAmBkCQ,GACzC,IAAI,kBAGUiH,GAEhBhB,MAACiB,EAAAA,aAAY,CAAA1H,SACTyG,EAAAA,IAAC7G,EAAgB8G,OAAAC,OAAA,CAAA,EAAKc"}

package/cjs/overlay/overlay.styles_12wym18.css CHANGED Viewed

@@ -1,8 +1,8 @@
-.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;}
+@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;}
+.w1ttt09o{-webkit-transition:none;transition:none;transition-delay:0ms;}}

package/cjs/pagination/pagination.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./pagination.styles_1u898rb.css");exports.ellipsisContainer="e1peilt2",exports.hover="h1x6xag5",exports.iconButton="irakt3t",exports.iconButtonNavigation="i1eo6n86",exports.inputSelectWrapper="issm41d",exports.inputView="i1hj21s6",exports.label="l1nxoktb",exports.labelDivider="lquxmfr",exports.pageItem="pia4hww",exports.pageItemSelected="p673w5b",exports.paginationList="p1ma9kw3",exports.paginationMenu="p1sz1s7f",exports.paginationMobileInput="p1yg278j",exports.paginationWrapper="p1afjf30";
+"use strict";require("./pagination.styles_6bcgva.css");exports.ellipsisContainer="e1peilt2",exports.hover="h1x6xag5",exports.iconButton="irakt3t",exports.iconButtonNavigation="i1eo6n86",exports.inputSelectWrapper="issm41d",exports.inputView="i1hj21s6",exports.label="l1nxoktb",exports.labelDivider="lquxmfr",exports.pageItem="pia4hww",exports.pageItemSelected="p673w5b",exports.paginationList="p1ma9kw3",exports.paginationMenu="p1sz1s7f",exports.paginationMobileInput="p1yg278j",exports.paginationWrapper="p1afjf30";
 //# sourceMappingURL=pagination.styles.js.map

package/cjs/pagination/pagination.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.styles.js","sources":["../../../src/pagination/pagination.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const paginationWrapper = css`\n display: flex;\n`;\n\nexport const paginationList = css`\n align-self: flex-start;\n\n display: flex;\n align-items: center;\n\n ${MediaQuery.MaxWidth.lg} {\n align-self: center;\n }\n`;\n\nexport const paginationMenu = css`\n display: inline-flex;\n align-items: center;\n`;\n\nexport const iconButton = css`\n display: flex;\n justify-content: center;\n align-items: center;\n\n outline: none;\n border-radius: ${Radius.sm};\n height: 2.5rem;\n width: 2.5rem;\n padding: 0 ${Spacing[\"spacing-8\"]};\n\n color: ${Colour[\"icon-primary\"]};\n\n svg {\n height: 1.25rem;\n width: 1.25rem;\n }\n\n &:disabled {\n color: ${Colour[\"icon-disabled-subtle\"]};\n cursor: not-allowed;\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus-visible {\n background: ${Colour[\"bg-hover\"]};\n }\n`;\n\nexport const iconButtonNavigation = css`\n margin: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const pageItem = css`\n outline: none;\n margin: ${Spacing[\"spacing-4\"]};\n box-shadow: none;\n border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n border-radius: ${Radius.sm};\n min-width: 2.5rem;\n height: 2.5rem;\n padding: 0 ${Spacing[\"spacing-8\"]};\n\n background: ${Colour.bg};\n cursor: pointer;\n\n ${Font[\"body-baseline-regular\"]};\n text-align: center;\n color: ${Colour.text};\n\n &:hover,\n &:focus-visible {\n border-color: ${Colour[\"bg-hover\"]};\n background: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text-hover\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n`;\n\nexport const pageItemSelected = css`\n border-color: ${Colour[\"bg-primary\"]};\n background: ${Colour[\"bg-primary\"]};\n color: ${Colour[\"text-inverse\"]};\n font-weight: ${Font.Spec[\"weight-bold\"]};\n\n &:hover,\n &:focus-visible {\n border-color: ${Colour[\"bg-selected-strongest-hover\"]};\n background: ${Colour[\"bg-selected-strongest-hover\"]};\n color: ${Colour[\"text-inverse\"]};\n font-weight: ${Font.Spec[\"weight-bold\"]};\n }\n`;\n\nexport const ellipsisContainer = css`\n position: relative;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: ${Spacing[\"spacing-4\"]};\n\n cursor: pointer;\n`;\n\nexport const paginationMobileInput = css`\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: ${Spacing[\"spacing-4\"]};\n\n color: ${Colour.text};\n`;\n\nexport const label = css`\n white-space: nowrap;\n`;\n\nexport const labelDivider = css`\n margin: 0 ${Spacing[\"spacing-16\"]};\n white-space: nowrap;\n`;\n\nexport const inputView = css`\n width: 3.5rem;\n height: 2.5rem;\n ${Font[\"body-baseline-regular\"]};\n\n input {\n padding: 0 ${Spacing[\"spacing-8\"]};\n text-align: center;\n }\n`;\n\nexport const hover = css`\n position: absolute;\n top: calc(${Spacing[\"spacing-8\"]} * -1);\n transform: translateY(-100%);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border: none;\n border-radius: ${Radius.sm};\n width: max-content;\n padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-12\"]};\n\n background: ${Colour[\"bg-hover\"]};\n\n ${Font[\"body-xs-regular\"]}\n color: ${Colour[\"text-hover\"]};\n`;\n\nexport const inputSelectWrapper = css`\n margin-left: ${Spacing[\"spacing-4\"]};\n width: 10rem;\n`;\n"],"names":[],"mappings":"~~4GAoG8B~~,yBA0CZ,8BApHK,uCA6BU,sCA2GF,4BA/BT,yBATJ,gCAIO,2BAnEJ,mCA0BQ,iCA3EF,kCAWA,yCA2FO,qCA1GJ"}
1	+ {"version":3,"file":"pagination.styles.js","sources":["../../../src/pagination/pagination.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const paginationWrapper = css`\n display: flex;\n`;\n\nexport const paginationList = css`\n align-self: flex-start;\n\n display: flex;\n align-items: center;\n\n ${MediaQuery.MaxWidth.lg} {\n align-self: center;\n }\n`;\n\nexport const paginationMenu = css`\n display: inline-flex;\n align-items: center;\n`;\n\nexport const iconButton = css`\n display: flex;\n justify-content: center;\n align-items: center;\n\n outline: none;\n border-radius: ${Radius.sm};\n height: 2.5rem;\n width: 2.5rem;\n padding: 0 ${Spacing[\"spacing-8\"]};\n\n color: ${Colour[\"icon-primary\"]};\n\n svg {\n height: 1.25rem;\n width: 1.25rem;\n }\n\n &:disabled {\n color: ${Colour[\"icon-disabled-subtle\"]};\n cursor: not-allowed;\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus-visible {\n background: ${Colour[\"bg-hover\"]};\n }\n`;\n\nexport const iconButtonNavigation = css`\n margin: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const pageItem = css`\n outline: none;\n margin: ${Spacing[\"spacing-4\"]};\n box-shadow: none;\n border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n border-radius: ${Radius.sm};\n min-width: 2.5rem;\n height: 2.5rem;\n padding: 0 ${Spacing[\"spacing-8\"]};\n\n background: ${Colour.bg};\n cursor: pointer;\n\n ${Font[\"body-baseline-regular\"]};\n text-align: center;\n color: ${Colour.text};\n\n &:hover,\n &:focus-visible {\n border-color: ${Colour[\"bg-hover\"]};\n background: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text-hover\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n`;\n\nexport const pageItemSelected = css`\n border-color: ${Colour[\"bg-primary\"]};\n background: ${Colour[\"bg-primary\"]};\n color: ${Colour[\"text-inverse\"]};\n font-weight: ${Font.Spec[\"weight-bold\"]};\n\n &:hover,\n &:focus-visible {\n border-color: ${Colour[\"bg-selected-strongest-hover\"]};\n background: ${Colour[\"bg-selected-strongest-hover\"]};\n color: ${Colour[\"text-inverse\"]};\n font-weight: ${Font.Spec[\"weight-bold\"]};\n }\n`;\n\nexport const ellipsisContainer = css`\n position: relative;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: ${Spacing[\"spacing-4\"]};\n\n cursor: pointer;\n`;\n\nexport const paginationMobileInput = css`\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: ${Spacing[\"spacing-4\"]};\n\n color: ${Colour.text};\n`;\n\nexport const label = css`\n white-space: nowrap;\n`;\n\nexport const labelDivider = css`\n margin: 0 ${Spacing[\"spacing-16\"]};\n white-space: nowrap;\n`;\n\nexport const inputView = css`\n width: 3.5rem;\n height: 2.5rem;\n ${Font[\"body-baseline-regular\"]};\n\n input {\n padding: 0 ${Spacing[\"spacing-8\"]};\n text-align: center;\n }\n`;\n\nexport const hover = css`\n position: absolute;\n top: calc(${Spacing[\"spacing-8\"]} * -1);\n transform: translateY(-100%);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border: none;\n border-radius: ${Radius.sm};\n width: max-content;\n padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-12\"]};\n\n background: ${Colour[\"bg-hover\"]};\n\n ${Font[\"body-xs-regular\"]}\n color: ${Colour[\"text-hover\"]};\n`;\n\nexport const inputSelectWrapper = css`\n margin-left: ${Spacing[\"spacing-4\"]};\n width: 10rem;\n`;\n"],"names":[],"mappings":"2GAoG8B,yBA0CZ,8BApHK,uCA6BU,sCA2GF,4BA/BT,yBATJ,gCAIO,2BAnEJ,mCA0BQ,iCA3EF,kCAWA,yCA2FO,qCA1GJ"}

package/{pagination/pagination.styles_1u898rb.css → cjs/pagination/pagination.styles_6bcgva.css} RENAMED Viewed

@@ -1,14 +1,14 @@
-.p1afjf30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+@layer fds{.p1afjf30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .p1ma9kw3{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;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;}:where(body.fds-breakpoint-lg-max) .p1ma9kw3{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
 .p1sz1s7f{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .irakt3t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none;border-radius:var(--fds-radius-sm);height:2.5rem;width:2.5rem;padding:0 var(--fds-spacing-8);color:var(--fds-colour-icon-primary);}.irakt3t svg{height:1.25rem;width:1.25rem;}.irakt3t:disabled{color:var(--fds-colour-icon-disabled-subtle);cursor:not-allowed;}.irakt3t:not(:disabled):hover,.irakt3t:not(:disabled):focus-visible{background:var(--fds-colour-bg-hover);}
 .i1eo6n86{margin:var(--fds-spacing-4);}
-.pia4hww{outline:none;margin:var(--fds-spacing-4);box-shadow:none;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);min-width:2.5rem;height:2.5rem;padding:0 var(--fds-spacing-8);background:var(--fds-colour-bg);cursor:pointer;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);text-align:center;color:var(--fds-colour-text);}.pia4hww:hover,.pia4hww:focus-visible{border-color:var(--fds-colour-bg-hover);background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);font-weight:var(--fds-font-weight-semibold);}
+.pia4hww{outline:none;margin:var(--fds-spacing-4);box-shadow:none;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);min-width:2.5rem;height:2.5rem;padding:0 var(--fds-spacing-8);background:var(--fds-colour-bg);cursor:pointer;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);text-align:center;color:var(--fds-colour-text);}.pia4hww:hover,.pia4hww:focus-visible{border-color:var(--fds-colour-bg-hover);background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);font-weight:var(--fds-font-weight-semibold);}
 .p673w5b{border-color:var(--fds-colour-bg-primary);background:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);font-weight:var(--fds-font-weight-bold);}.p673w5b:hover,.p673w5b:focus-visible{border-color:var(--fds-colour-bg-selected-strongest-hover);background:var(--fds-colour-bg-selected-strongest-hover);color:var(--fds-colour-text-inverse);font-weight:var(--fds-font-weight-bold);}
 .e1peilt2{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:var(--fds-spacing-4);cursor:pointer;}
 .p1yg278j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:var(--fds-spacing-4);color:var(--fds-colour-text);}
 .l1nxoktb{white-space:nowrap;}
 .lquxmfr{margin:0 var(--fds-spacing-16);white-space:nowrap;}
-.i1hj21s6{width:3.5rem;height:2.5rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.i1hj21s6 input{padding:0 var(--fds-spacing-8);text-align:center;}
-.h1x6xag5{position:absolute;top:calc(var(--fds-spacing-8) * -1);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border:none;border-radius:var(--fds-radius-sm);width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:var(--fds-spacing-4) var(--fds-spacing-12);background:var(--fds-colour-bg-hover);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-hover);}
-.issm41d{margin-left:var(--fds-spacing-4);width:10rem;}
+.i1hj21s6{width:3.5rem;height:2.5rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.i1hj21s6 input{padding:0 var(--fds-spacing-8);text-align:center;}
+.h1x6xag5{position:absolute;top:calc(var(--fds-spacing-8) * -1);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border:none;border-radius:var(--fds-radius-sm);width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:var(--fds-spacing-4) var(--fds-spacing-12);background:var(--fds-colour-bg-hover);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-hover);}
+.issm41d{margin-left:var(--fds-spacing-4);width:10rem;}}

package/cjs/pill/pill.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./pill.styles_1wiyl8.css");exports.label="l1uma0l6",exports.wrapperBase="w2wrvwd",exports.wrapperOutlineBlack="wnrixoo",exports.wrapperOutlineBlue="w19krjn1",exports.wrapperOutlineGreen="w1nlhiv2",exports.wrapperOutlineGrey="wnolbsf",exports.wrapperOutlinePrimary="w1h3c6yz",exports.wrapperOutlineRed="w1c1fn8z",exports.wrapperOutlineYellow="wfw4qqz",exports.wrapperSolid="w1bnitgk",exports.wrapperSolidBlack="w10rd591",exports.wrapperSolidBlue="w17huuqy",exports.wrapperSolidGreen="w1dquypt",exports.wrapperSolidGrey="w14ozhbm",exports.wrapperSolidPrimary="w1lx8mm6",exports.wrapperSolidRed="wtf7rkw",exports.wrapperSolidYellow="wijzmbj";
+"use strict";require("./pill.styles_xwrniu.css");exports.label="l1uma0l6",exports.wrapperBase="w2wrvwd",exports.wrapperOutlineBlack="wnrixoo",exports.wrapperOutlineBlue="w19krjn1",exports.wrapperOutlineGreen="w1nlhiv2",exports.wrapperOutlineGrey="wnolbsf",exports.wrapperOutlinePrimary="w1h3c6yz",exports.wrapperOutlineRed="w1c1fn8z",exports.wrapperOutlineYellow="wfw4qqz",exports.wrapperSolid="w1bnitgk",exports.wrapperSolidBlack="w10rd591",exports.wrapperSolidBlue="w17huuqy",exports.wrapperSolidGreen="w1dquypt",exports.wrapperSolidGrey="w14ozhbm",exports.wrapperSolidPrimary="w1lx8mm6",exports.wrapperSolidRed="wtf7rkw",exports.wrapperSolidYellow="wijzmbj";
 //# sourceMappingURL=pill.styles.js.map

package/{pill/pill.styles_1wiyl8.css → cjs/pill/pill.styles_xwrniu.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-.w2wrvwd{border-radius:var(--fds-radius-full);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);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;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid);}.w2wrvwd svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+@layer fds{.w2wrvwd{border-radius:var(--fds-radius-full);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);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;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid);}.w2wrvwd svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .w1bnitgk{color:var(--fds-colour-text-inverse);border-color:transparent;}
 .w10rd591{background:var(--fds-colour-bg-inverse);}
 .w14ozhbm{background:var(--fds-colour-bg-inverse-subtler);}
@@ -14,4 +14,4 @@
 .w1c1fn8z{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);color:var(--fds-colour-text-error);}
 .w19krjn1{background:var(--fds-colour-bg-info);border-color:var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
 .w1h3c6yz{background:var(--fds-colour-bg-primary-subtlest);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}
-.l1uma0l6{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}
+.l1uma0l6{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}}

package/cjs/popover/popover-inline/popover-inline.styles_bkopnt.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.p1h7dfwa{color:var(--fds-colour-text-primary);font-weight:600;text-underline-position:under;}.p1h7dfwa[data-underline-style="underline"]{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-style="underline-dashed"]{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa:hover,.p1h7dfwa:focus-visible{color:var(--fds-colour-text-hover);}.p1h7dfwa[data-underline-hover-style="underline"]:hover,.p1h7dfwa[data-underline-hover-style="underline"]:focus-visible{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-hover-style="underline-dashed"]:hover,.p1h7dfwa[data-underline-hover-style="underline-dashed"]:focus-visible{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa svg{height:1lh;width:1em;vertical-align:top;}
-.pzf43s3{margin-left:0.25rem;}
+@layer fds{.p1h7dfwa{color:var(--fds-colour-text-primary);font-weight:600;text-underline-position:under;}.p1h7dfwa[data-underline-style="underline"]{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-style="underline-dashed"]{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa:hover,.p1h7dfwa:focus-visible{color:var(--fds-colour-text-hover);}.p1h7dfwa[data-underline-hover-style="underline"]:hover,.p1h7dfwa[data-underline-hover-style="underline"]:focus-visible{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-hover-style="underline-dashed"]:hover,.p1h7dfwa[data-underline-hover-style="underline-dashed"]:focus-visible{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa svg{height:1lh;width:1em;vertical-align:top;}
+.pzf43s3{margin-left:0.25rem;}}

package/cjs/popover/popover-trigger.styles_8zokig.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tjxhm5y{display:inline;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative;}
1	+ @layer fds{.tjxhm5y{display:inline;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative;}}

package/cjs/popover/popover.styles_ujnf0h.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.p1scb124{max-width:30rem;padding:0 1rem;pointer-events:auto;outline:none;}
+@layer fds{.p1scb124{max-width:30rem;padding:0 1rem;pointer-events:auto;outline:none;}
 .p1jmdldd{color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .p1jmdldd{display:none;}.p1jmdldd::-webkit-scrollbar{width:14px;}.p1jmdldd::-webkit-scrollbar-track{background:transparent;}.p1jmdldd::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
 .p51fygj{--fds-internal-popover-popoverCard-maxHeight:initial;max-height:var(--fds-internal-popover-popoverCard-maxHeight);}
-.p1hzbz92{--fds-internal-popover-popoverCard-overflowY:initial;overflow-y:var(--fds-internal-popover-popoverCard-overflowY);}
+.p1hzbz92{--fds-internal-popover-popoverCard-overflowY:initial;overflow-y:var(--fds-internal-popover-popoverCard-overflowY);}}

package/cjs/predictive-text-input/predictive-text-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),i=require("../input/input.js"),a=require("../shared/accessibility/index.js");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var l=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:m,minimumCharacters:q=3,fetchOptions:f,placeholder:x="Enter here...",readOnly:g=!1,disabled:j=!1,error:w,valueExtractor:v,listExtractor:y,displayValueExtractor:b,onSelectOption:_,alignment:S,dropdownZIndex:T,dropdownRootNode:E,dropdownWidth:I,"aria-describedby":k}=c,C=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const O=e=>e?b?b(e):e.toString():"",[A,D]=s.useState((()=>m?O(m):"")),[H,N]=s.useState((()=>m?O(m):"")),[P,R]=s.useState([]),[G,L]=s.useState(!0),[M,W]=s.useState(!1),[B,V]=s.useState(!!m),[F,Z]=s.useState(m),[$,z]=s.useState(!1),[J,K]=s.useState(!1),Q=o.useId(),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(f),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){W(!1),L(!0);try{const e=yield te.current(r);N(r),R(null!=e?e:[]),L(!1)}catch(e){W(!0),L(!1)}}}))),[]),ie=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=f}),[f]),s.useEffect((()=>{A&&A.length>=q?B?A!==H&&ie(A):(z(!0),ie(A)):ie.cancel(),""===A&&F&&(null==_||_(void 0,void 0),pe(),Z(void 0)),m&&A!==O(m)&&V(!1)}),[A,m]),s.useEffect((()=>{D(m?O(m):""),N(m?O(m):""),Z(m),R([]),V(!!m)}),[m]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==P?void 0:P.length)&&void 0!==e?e:0;"loading"===r&&A.length>=q?X("Loading suggested results"):"fail"!==r?!$||G||M||X(0===t?A?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[P,A,M,G]),s.useEffect((()=>()=>{ie.cancel()}),[ie]);const ae=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),D(O(e)),N(e?O(e):""),V(!0),Z(e),z(!1),null==_||_(e,r)},oe=()=>{K(!0)},le=e=>{$||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{D(""),R([]),V(!1),z(!1),null==_||_(void 0,void 0)},ue=()=>{if(!B)if(F){const e=O(F);D(e),z(!1)}else de()},ce=e=>{D(e.target.value),V(!1)},pe=e=>{N(""),V(!1),R([]),L(!0)},he=()=>M?"fail":G?"loading":"success";return r.jsx(n.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!j,isOpen:$,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,focused:J,disabled:j,readOnly:g,error:w,children:[r.jsxs(a.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",q," or more characters for suggested results."]}),U&&r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(i.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:A,onChange:ce,placeholder:x,readOnly:g,disabled:j,allowClear:!0,onClear:de,"aria-expanded":$,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:A.length<q?ue:void 0,styleType:"no-border","aria-describedby":a.concatIds(k,Y)},C))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(l.DropdownList,{listboxId:Q,listItems:P,onSelectItem:ae,onDismiss:ne,valueExtractor:v,listExtractor:y,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(A),width:I,matchElementWidth:!0})}),onOpen:()=>{!B&&A.length>=q&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:T,rootNode:E})})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),i=require("../input/input.js"),a=require("../shared/accessibility/index.js");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_mloii0.css");var l=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:m,minimumCharacters:q=3,fetchOptions:x,placeholder:f="Enter here...",readOnly:g=!1,disabled:j=!1,error:w,valueExtractor:v,listExtractor:y,displayValueExtractor:b,onSelectOption:_,alignment:S,dropdownZIndex:T,dropdownRootNode:E,dropdownWidth:I,"aria-describedby":k}=c,C=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const O=e=>e?b?b(e):e.toString():"",[A,D]=s.useState((()=>m?O(m):"")),[H,N]=s.useState((()=>m?O(m):"")),[P,R]=s.useState([]),[G,L]=s.useState(!0),[M,W]=s.useState(!1),[B,V]=s.useState(!!m),[F,Z]=s.useState(m),[$,z]=s.useState(!1),[J,K]=s.useState(!1),Q=o.useId(),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(x),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){W(!1),L(!0);try{const e=yield te.current(r);N(r),R(null!=e?e:[]),L(!1)}catch(e){W(!0),L(!1)}}}))),[]),ie=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=x}),[x]),s.useEffect((()=>{A&&A.length>=q?B?A!==H&&ie(A):(z(!0),ie(A)):ie.cancel(),""===A&&F&&(null==_||_(void 0,void 0),pe(),Z(void 0)),m&&A!==O(m)&&V(!1)}),[A,m]),s.useEffect((()=>{D(m?O(m):""),N(m?O(m):""),Z(m),R([]),V(!!m)}),[m]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==P?void 0:P.length)&&void 0!==e?e:0;"loading"===r&&A.length>=q?X("Loading suggested results"):"fail"!==r?!$||G||M||X(0===t?A?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[P,A,M,G]),s.useEffect((()=>()=>{ie.cancel()}),[ie]);const ae=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),D(O(e)),N(e?O(e):""),V(!0),Z(e),z(!1),null==_||_(e,r)},oe=()=>{K(!0)},le=e=>{$||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{D(""),R([]),V(!1),z(!1),null==_||_(void 0,void 0)},ue=()=>{if(!B)if(F){const e=O(F);D(e),z(!1)}else de()},ce=e=>{D(e.target.value),V(!1)},pe=e=>{N(""),V(!1),R([]),L(!0)},he=()=>M?"fail":G?"loading":"success";return r.jsx(n.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!j,isOpen:$,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,focused:J,disabled:j,readOnly:g,error:w,children:[r.jsxs(a.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",q," or more characters for suggested results."]}),U&&r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(i.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:A,onChange:ce,placeholder:f,readOnly:g,disabled:j,allowClear:!0,onClear:de,"aria-expanded":$,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:A.length<q?ue:void 0,styleType:"no-border","aria-describedby":a.concatIds(k,Y)},C))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(l.DropdownList,{listboxId:Q,listItems:P,onSelectItem:ae,onDismiss:ne,valueExtractor:v,listExtractor:y,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(A),width:I,matchElementWidth:!0})}),onOpen:()=>{!B&&A.length>=q&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:T,rootNode:E})})};
 //# sourceMappingURL=predictive-text-input.js.map

package/cjs/predictive-text-input/predictive-text-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n className,\n \"data-testid\": testId,\n selectedOption,\n minimumCharacters = 3,\n fetchOptions,\n placeholder = \"Enter here...\",\n readOnly = false,\n disabled = false,\n error,\n valueExtractor,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n const getDisplayValue = (item: T \| undefined): string => {\n if (!item) return \"\";\n return displayValueExtractor\n ? displayValueExtractor(item)\n : item.toString();\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [input, setInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [searchedInput, setSearchedInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [options, setOptions] = useState<T[]>([]);\n const [isLoading, setIsLoading] = useState<boolean>(true);\n const [isError, setIsError] = useState<boolean>(false);\n const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n !!selectedOption\n );\n const [prevOptionSelected, setPrevOptionSelected] = useState<T \| undefined>(\n selectedOption\n );\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const internalId = useId();\n const [resultAnnouncement, setResultAnnouncement] = useState<string \| null>(\n null\n );\n const instructionId = `${internalId}-instruction`;\n\n const nodeRef = useRef<HTMLDivElement \| null>(null);\n const selectorRef = useRef<HTMLInputElement \| null>(null);\n\n const fetchOptionsRef = useRef(fetchOptions);\n\n // =============================================================================\n // DEBOUNCE FUNCTIONS\n // =============================================================================\n const handleFetchOptions = useCallback(async (input: string) => {\n if (!fetchOptionsRef.current) return;\n setIsError(false);\n setIsLoading(true);\n try {\n const fetchedOptions = await fetchOptionsRef.current(input);\n setSearchedInput(input);\n setOptions(fetchedOptions ?? []);\n setIsLoading(false);\n } catch {\n setIsError(true);\n setIsLoading(false);\n }\n }, []);\n\n const fetchOptionsDebounced = useCallback(\n debounce((input: string) => {\n handleFetchOptions(input);\n }, 500),\n [handleFetchOptions]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n fetchOptionsRef.current = fetchOptions;\n }, [fetchOptions]);\n\n useEffect(() => {\n /**\n Should not fetch options for the following the scenario :\n * 1. When input < minimumCharacters\n * 2. When user selected option from dropdown becomes input\n * 3. Initial selectedOption passed in as input\n */\n if (input && input.length >= minimumCharacters) {\n if (!isOptionSelected) {\n setIsOpen(true);\n fetchOptionsDebounced(input);\n } else if (input !== searchedInput) {\n fetchOptionsDebounced(input);\n }\n } else {\n fetchOptionsDebounced.cancel();\n }\n\n if (input === \"\" && prevOptionSelected) {\n onSelectOption?.(undefined, undefined);\n handleDropdownDismiss();\n setPrevOptionSelected(undefined);\n }\n\n if (selectedOption && input !== getDisplayValue(selectedOption)) {\n setIsOptionSelected(false);\n }\n }, [input, selectedOption]);\n\n useEffect(() => {\n setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setPrevOptionSelected(selectedOption);\n setOptions([]);\n setIsOptionSelected(!!selectedOption);\n }, [selectedOption]);\n\n useEffect(() => {\n const state = getItemsLoadState();\n const count = options?.length ?? 0;\n\n if (state === \"loading\" && input.length >= minimumCharacters) {\n setResultAnnouncement(\"Loading suggested results\");\n return;\n }\n\n if (state === \"fail\") {\n setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n return;\n }\n\n if (isOpen && !isLoading && !isError) {\n if (count === 0) {\n setResultAnnouncement(input ? \"No results found.\" : null);\n } else {\n setResultAnnouncement(\n `${count} result${\n count > 1 ? \"s\" : \"\"\n } found. Press down arrow to scroll through the list.`\n );\n }\n }\n }, [options, input, isError, isLoading]);\n\n // =============================================================================\n // Cleanup: cancel debounce on unmount\n // =============================================================================\n useEffect(() => {\n return () => {\n fetchOptionsDebounced.cancel();\n };\n }, [fetchOptionsDebounced]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setInput(getDisplayValue(item));\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(true);\n setPrevOptionSelected(item);\n setIsOpen(false);\n onSelectOption?.(item, extractedValue);\n };\n\n const handleOpen = () => {\n if (!isOptionSelected && input.length >= minimumCharacters) {\n setIsFocused(true);\n }\n };\n\n const handleClose = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n };\n\n const handleNodeFocus = () => {\n setIsFocused(true);\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n !isOpen &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setIsFocused(false);\n handleOnBlur();\n }\n };\n\n const handleListDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n selectorRef.current?.focus();\n };\n\n const handleOnClear = () => {\n setInput(\"\");\n setOptions([]);\n setIsOptionSelected(false);\n setIsOpen(false);\n onSelectOption?.(undefined, undefined);\n };\n\n const handleOnBlur = () => {\n if (!isOptionSelected) {\n if (prevOptionSelected) {\n const prevValue = getDisplayValue(prevOptionSelected);\n setInput(prevValue);\n setIsOpen(false);\n } else {\n handleOnClear();\n }\n }\n };\n\n const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n setInput(e.target.value);\n setIsOptionSelected(false);\n };\n\n const handleDropdownDismiss = (item?: T) => {\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(!!item);\n setOptions([]);\n setIsLoading(true);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getItemsLoadState = (): ItemsLoadStateType => {\n if (isError) return \"fail\";\n return isLoading ? \"loading\" : \"success\";\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderInputElement = () => {\n return (\n <InputWrapper\n className={className}\n data-testid={testId}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={isFocused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <VisuallyHidden id={instructionId} aria-hidden>\n Type in {minimumCharacters} or more characters for suggested\n results.\n </VisuallyHidden>\n {resultAnnouncement && (\n <VisuallyHidden aria-live=\"polite\">\n {resultAnnouncement}\n </VisuallyHidden>\n )}\n <Input\n role=\"combobox\"\n ref={selectorRef}\n id={internalId}\n type=\"text\"\n value={input}\n onChange={handleTyping}\n placeholder={placeholder}\n readOnly={readOnly}\n disabled={disabled}\n allowClear\n onClear={handleOnClear}\n aria-expanded={isOpen}\n aria-controls={internalId}\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n onBlur={\n input.length < minimumCharacters\n ? handleOnBlur\n : undefined\n }\n styleType=\"no-border\"\n aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n {...otherProps}\n />\n </InputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <>\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n itemsLoadState={getItemsLoadState()}\n itemTruncationType={\"end\"}\n itemMaxLines={1}\n labelDisplayType={\"next-line\"}\n disableItemFocus\n onRetry={() => handleFetchOptions(input)}\n width={dropdownWidth}\n matchElementWidth\n />\n </>\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderInputElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n className,\n \"data-testid\": testId,\n selectedOption,\n minimumCharacters = 3,\n fetchOptions,\n placeholder = \"Enter here...\",\n readOnly = false,\n disabled = false,\n error,\n valueExtractor,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n const getDisplayValue = (item: T \| undefined): string => {\n if (!item) return \"\";\n return displayValueExtractor\n ? displayValueExtractor(item)\n : item.toString();\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [input, setInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [searchedInput, setSearchedInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [options, setOptions] = useState<T[]>([]);\n const [isLoading, setIsLoading] = useState<boolean>(true);\n const [isError, setIsError] = useState<boolean>(false);\n const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n !!selectedOption\n );\n const [prevOptionSelected, setPrevOptionSelected] = useState<T \| undefined>(\n selectedOption\n );\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const internalId = useId();\n const [resultAnnouncement, setResultAnnouncement] = useState<string \| null>(\n null\n );\n const instructionId = `${internalId}-instruction`;\n\n const nodeRef = useRef<HTMLDivElement \| null>(null);\n const selectorRef = useRef<HTMLInputElement \| null>(null);\n\n const fetchOptionsRef = useRef(fetchOptions);\n\n // =============================================================================\n // DEBOUNCE FUNCTIONS\n // =============================================================================\n const handleFetchOptions = useCallback(async (input: string) => {\n if (!fetchOptionsRef.current) return;\n setIsError(false);\n setIsLoading(true);\n try {\n const fetchedOptions = await fetchOptionsRef.current(input);\n setSearchedInput(input);\n setOptions(fetchedOptions ?? []);\n setIsLoading(false);\n } catch {\n setIsError(true);\n setIsLoading(false);\n }\n }, []);\n\n const fetchOptionsDebounced = useCallback(\n debounce((input: string) => {\n handleFetchOptions(input);\n }, 500),\n [handleFetchOptions]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n fetchOptionsRef.current = fetchOptions;\n }, [fetchOptions]);\n\n useEffect(() => {\n /**\n Should not fetch options for the following the scenario :\n * 1. When input < minimumCharacters\n * 2. When user selected option from dropdown becomes input\n * 3. Initial selectedOption passed in as input\n */\n if (input && input.length >= minimumCharacters) {\n if (!isOptionSelected) {\n setIsOpen(true);\n fetchOptionsDebounced(input);\n } else if (input !== searchedInput) {\n fetchOptionsDebounced(input);\n }\n } else {\n fetchOptionsDebounced.cancel();\n }\n\n if (input === \"\" && prevOptionSelected) {\n onSelectOption?.(undefined, undefined);\n handleDropdownDismiss();\n setPrevOptionSelected(undefined);\n }\n\n if (selectedOption && input !== getDisplayValue(selectedOption)) {\n setIsOptionSelected(false);\n }\n }, [input, selectedOption]);\n\n useEffect(() => {\n setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setPrevOptionSelected(selectedOption);\n setOptions([]);\n setIsOptionSelected(!!selectedOption);\n }, [selectedOption]);\n\n useEffect(() => {\n const state = getItemsLoadState();\n const count = options?.length ?? 0;\n\n if (state === \"loading\" && input.length >= minimumCharacters) {\n setResultAnnouncement(\"Loading suggested results\");\n return;\n }\n\n if (state === \"fail\") {\n setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n return;\n }\n\n if (isOpen && !isLoading && !isError) {\n if (count === 0) {\n setResultAnnouncement(input ? \"No results found.\" : null);\n } else {\n setResultAnnouncement(\n `${count} result${\n count > 1 ? \"s\" : \"\"\n } found. Press down arrow to scroll through the list.`\n );\n }\n }\n }, [options, input, isError, isLoading]);\n\n // =============================================================================\n // Cleanup: cancel debounce on unmount\n // =============================================================================\n useEffect(() => {\n return () => {\n fetchOptionsDebounced.cancel();\n };\n }, [fetchOptionsDebounced]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setInput(getDisplayValue(item));\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(true);\n setPrevOptionSelected(item);\n setIsOpen(false);\n onSelectOption?.(item, extractedValue);\n };\n\n const handleOpen = () => {\n if (!isOptionSelected && input.length >= minimumCharacters) {\n setIsFocused(true);\n }\n };\n\n const handleClose = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n };\n\n const handleNodeFocus = () => {\n setIsFocused(true);\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n !isOpen &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setIsFocused(false);\n handleOnBlur();\n }\n };\n\n const handleListDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n selectorRef.current?.focus();\n };\n\n const handleOnClear = () => {\n setInput(\"\");\n setOptions([]);\n setIsOptionSelected(false);\n setIsOpen(false);\n onSelectOption?.(undefined, undefined);\n };\n\n const handleOnBlur = () => {\n if (!isOptionSelected) {\n if (prevOptionSelected) {\n const prevValue = getDisplayValue(prevOptionSelected);\n setInput(prevValue);\n setIsOpen(false);\n } else {\n handleOnClear();\n }\n }\n };\n\n const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n setInput(e.target.value);\n setIsOptionSelected(false);\n };\n\n const handleDropdownDismiss = (item?: T) => {\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(!!item);\n setOptions([]);\n setIsLoading(true);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getItemsLoadState = (): ItemsLoadStateType => {\n if (isError) return \"fail\";\n return isLoading ? \"loading\" : \"success\";\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderInputElement = () => {\n return (\n <InputWrapper\n className={className}\n data-testid={testId}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={isFocused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <VisuallyHidden id={instructionId} aria-hidden>\n Type in {minimumCharacters} or more characters for suggested\n results.\n </VisuallyHidden>\n {resultAnnouncement && (\n <VisuallyHidden aria-live=\"polite\">\n {resultAnnouncement}\n </VisuallyHidden>\n )}\n <Input\n role=\"combobox\"\n ref={selectorRef}\n id={internalId}\n type=\"text\"\n value={input}\n onChange={handleTyping}\n placeholder={placeholder}\n readOnly={readOnly}\n disabled={disabled}\n allowClear\n onClear={handleOnClear}\n aria-expanded={isOpen}\n aria-controls={internalId}\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n onBlur={\n input.length < minimumCharacters\n ? handleOnBlur\n : undefined\n }\n styleType=\"no-border\"\n aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n {...otherProps}\n />\n </InputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <>\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n itemsLoadState={getItemsLoadState()}\n itemTruncationType={\"end\"}\n itemMaxLines={1}\n labelDisplayType={\"next-line\"}\n disableItemFocus\n onRetry={() => handleFetchOptions(input)}\n width={dropdownWidth}\n matchElementWidth\n />\n </>\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderInputElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"mqEAa0CA,QAAAC,UACtCA,EACA,cAAeC,EAAMC,eACrBA,EAAcC,kBACdA,EAAoB,EAACC,aACrBA,EAAYC,YACZA,EAAc,gBAAeC,SAC7BA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,eACLA,EAAcC,cACdA,EAAaC,sBACbA,EAAqBC,eACrBA,EAAcC,UACdA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,cAChBA,EACA,mBAAoBC,KACjBC,EAAUC,EAAAA,OAAApB,EAnByB,CAAA,YAAA,cAAA,iBAAA,oBAAA,eAAA,cAAA,WAAA,WAAA,QAAA,iBAAA,gBAAA,wBAAA,iBAAA,YAAA,iBAAA,mBAAA,gBAAA,qBAqBtC,MAAMqB,EAAmBC,GAChBA,EACEV,EACDA,EAAsBU,GACtBA,EAAKC,WAHO,IASfC,EAAOC,GAAYC,EAAAA,UAAiB,IACvCvB,EAAiBkB,EAAgBlB,GAAkB,MAEhDwB,EAAeC,GAAoBF,EAAAA,UAAiB,IACvDvB,EAAiBkB,EAAgBlB,GAAkB,MAEhD0B,EAASC,GAAcJ,EAAAA,SAAc,KACrCK,EAAWC,GAAgBN,EAAAA,UAAkB,IAC7CO,EAASC,GAAcR,EAAAA,UAAkB,IACzCS,EAAkBC,GAAuBV,EAAAA,WAC1CvB,IAECkC,EAAoBC,GAAyBZ,EAAAA,SAChDvB,IAEGoC,EAAQC,GAAad,EAAAA,UAAS,IAC9Be,EAAWC,GAAgBhB,EAAAA,UAAS,GAErCiB,EAAaC,EAAAA,SACZC,EAAoBC,GAAyBpB,EAAAA,SAChD,MAEEqB,EAAgB,GAAGJ,gBAEnBK,GAAUC,EAAAA,OAA8B,MACxCC,GAAcD,EAAAA,OAAgC,MAE9CE,GAAkBF,EAAAA,OAAO5C,GAKzB+C,GAAqBC,EAAAA,aAAmB7B,GAAiB8B,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC3D,GAAKH,GAAgBI,QAArB,CACArB,GAAW,GACXF,GAAa,GACb,IACI,MAAMwB,QAAuBL,GAAgBI,QAAQ/B,GACrDI,EAAiBJ,GACjBM,EAAW0B,QAAAA,EAAkB,IAC7BxB,GAAa,EACjB,CAAE,MAAAhC,GACEkC,GAAW,GACXF,GAAa,EACjB,CAX8B,CAYlC,KAAG,IAEGyB,GAAwBJ,EAAAA,YAC1BK,EAAAA,SAAUlC,IACN4B,GAAmB5B,EAAM,GAC1B,KACH,CAAC4B,KAOLO,EAAAA,WAAU,KACNR,GAAgBI,QAAUlD,CAAY,GACvC,CAACA,IAEJsD,EAAAA,WAAU,KAOFnC,GAASA,EAAMoC,QAAUxD,EACpB+B,EAGMX,IAAUG,GACjB8B,GAAsBjC,IAHtBgB,GAAU,GACViB,GAAsBjC,IAK1BiC,GAAsBI,SAGZ,KAAVrC,GAAgBa,IAChBxB,SAAAA,OAAiBiD,OAAWA,GAC5BC,KACAzB,OAAsBwB,IAGtB3D,GAAkBqB,IAAUH,EAAgBlB,IAC5CiC,GAAoB,EACxB,GACD,CAACZ,EAAOrB,IAEXwD,EAAAA,WAAU,KACNlC,EAAStB,EAAiBkB,EAAgBlB,GAAkB,IAC5DyB,EAAiBzB,EAAiBkB,EAAgBlB,GAAkB,IACpEmC,EAAsBnC,GACtB2B,EAAW,IACXM,IAAsBjC,EAAe,GACtC,CAACA,IAEJwD,EAAAA,WAAU,WACN,MAAMK,EAAQC,KACRC,EAAuB,QAAflE,EAAA6B,aAAO,EAAPA,EAAS+B,cAAM,IAAA5D,EAAAA,EAAI,EAEnB,YAAVgE,GAAuBxC,EAAMoC,QAAUxD,EACvC0C,EAAsB,6BAIZ,SAAVkB,GAKAzB,GAAWR,GAAcE,GAErBa,EADU,IAAVoB,EACsB1C,EAAQ,oBAAsB,KAGhD,GAAG0C,WACCA,EAAQ,EAAI,IAAM,0DAV9BpB,EAAsB,yCAc1B,GACD,CAACjB,EAASL,EAAOS,EAASF,IAK7B4B,EAAAA,WAAU,IACC,KACHF,GAAsBI,QAAQ,GAEnC,CAACJ,KAKJ,MAAMU,GAAsB,CAAC7C,EAAS8C,WACf,QAAnBpE,EAAAkD,GAAYK,eAAO,IAAAvD,GAAAA,EAAEqE,QACrB5C,EAASJ,EAAgBC,IACzBM,EAAiBN,EAAOD,EAAgBC,GAAQ,IAChDc,GAAoB,GACpBE,EAAsBhB,GACtBkB,GAAU,GACV3B,SAAAA,EAAiBS,EAAM8C,EAAe,EAepCE,GAAkB,KACpB5B,GAAa,EAAK,EAGhB6B,GAAkBC,IAEfjC,IACDS,GAAQO,SACPP,GAAQO,QAAQkB,SAASD,EAAEE,iBAE5BhC,GAAa,GACbiC,KACJ,EAGEC,GAAoB,KACtBpC,GAAU,GACVE,GAAa,EAAM,EAUjBmC,GAAgB,KAClBpD,EAAS,IACTK,EAAW,IACXM,GAAoB,GACpBI,GAAU,GACV3B,SAAAA,OAAiBiD,OAAWA,EAAU,EAGpCa,GAAe,KACjB,IAAKxC,EACD,GAAIE,EAAoB,CACpB,MAAMyC,EAAYzD,EAAgBgB,GAClCZ,EAASqD,GACTtC,GAAU,EACd,MACIqC,IAER,EAGEE,GAAgBP,IAClB/C,EAAS+C,EAAEQ,OAAOC,OAClB7C,GAAoB,EAAM,EAGxB2B,GAAyBzC,IAC3BM,EAAgD,IAChDQ,GAAoB,GACpBN,EAAW,IACXE,GAAa,EAAK,EAMhBiC,GAAoB,IAClBhC,EAAgB,OACbF,EAAY,UAAY,UAiFnC,OACImD,EAAAA,IAACC,EAAAA,kBAAiB,CAAAC,SACdF,EAAAA,IAACG,EAAAA,oBAAmB,CAChBC,SAAU/E,IAAaC,EACvB+B,OAAQA,EACRgD,cAhFe,IAEnBC,EAAAA,KAACC,EAAAA,aAAY,CACTxF,UAAWA,EAAS,cACPC,EACbwF,IAAK1C,GACL2C,UAAU,EACVC,QAAStB,GACTuB,OAAQtB,GACRuB,QAASrD,EACTjC,SAAUA,EACVD,SAAUA,EACVE,MAAOA,EAAK2E,SAAA,CAEZI,EAAAA,KAACO,EAAAA,eAAc,CAACC,GAAIjD,EAAa,eAAA,EAAAqC,SAAA,CAAA,WACpBhF,EAAiB,gDAG7ByC,GACGqC,EAAAA,IAACa,EAAAA,eAAc,CAAA,YAAW,SAAQX,SAC7BvC,IAGTqC,EAAAA,IAACe,EAAAA,MAAKC,OAAAC,OAAA,CACFC,KAAK,WACLV,IAAKxC,GACL8C,GAAIrD,EACJ0D,KAAK,OACLpB,MAAOzD,EACP8E,SAAUvB,GACVzE,YAAaA,EACbC,SAAUA,EACVC,SAAUA,EACV+F,YAAU,EACVC,QAAS3B,GAAa,gBACPtC,EAAM,gBACNI,EAAU,oBACP,OAAM,gBACV,UACdkD,OACIrE,EAAMoC,OAASxD,EACTuE,QACAb,EAEV2C,UAAU,+BACQC,EAAAA,UAAUxF,EAAiB6B,IACzC5B,OAmCRwF,eA7BW,IAEfzB,EAAAA,IAAA0B,EAAAA,SAAA,CAAAxB,SACIF,EAAAA,IAAC2B,eAAY,CACTC,UAAWnE,EACXoE,UAAWlF,EACXmF,aAAc7C,GACd8C,UAAWrC,GACXlE,eAAgBA,EAChBC,cAAeA,EACfuG,eAAgBjD,KAChBkD,mBAAoB,MACpBC,aAAc,EACdC,iBAAkB,YAClBC,oBACAC,QAAS,IAAMnE,GAAmB5B,GAClCgG,MAAOvG,EACPwG,mBAAiB,MAarBC,OApKO,MACVvF,GAAoBX,EAAMoC,QAAUxD,GACrCsC,GAAa,EACjB,EAkKQiF,QA/JQ,KAChBnF,GAAU,GACVE,GAAa,GACbiC,IAAc,EA6JNsC,UAtIU,WAClBzE,GAAU,GACVE,GAAa,GACbiC,KACmB,QAAnB3E,EAAAkD,GAAYK,eAAO,IAAAvD,GAAAA,EAAEqE,OAAO,EAmIpBuD,eAAe,EACfC,OAAQ,EACR/G,UAAWA,EACXgH,oBAAkB,EAClBC,aAAchH,EACdiH,SAAUhH,KAEE"}

package/cjs/progress-indicator/progress-indicator.styles_1c038s4.css CHANGED Viewed

@@ -1,8 +1,8 @@
-.w103113g{position:relative;width:100%;margin:2rem 0;}:where(body.fds-breakpoint-xl-max) .w103113g{margin:1.5rem 0;}:where(body.fds-breakpoint-lg-max) .w103113g{margin:1rem 0;}
+@layer fds{.w103113g{position:relative;width:100%;margin:2rem 0;}:where(body.fds-breakpoint-xl-max) .w103113g{margin:1.5rem 0;}:where(body.fds-breakpoint-lg-max) .w103113g{margin:1rem 0;}
 .ck7dr6z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;}
 .i1k6bqsf{height:4px;margin-bottom:var(--fds-spacing-8);border-radius:var(--fds-radius-full);background-color:var(--fds-colour-bg-disabled);}
 .inywq69{background-color:var(--fds-colour-bg-primary-subtle);}
 .i1ubzlq2{overflow-wrap:anywhere;color:var(--fds-colour-text-disabled);}
 .i8ugwdc{color:var(--fds-colour-text-primary);}
 .i8128on{overflow-wrap:anywhere;color:var(--fds-colour-text);}
-.i1vcego5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}.i1vcego5:not(:last-child){margin-right:0.5rem;}
+.i1vcego5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}.i1vcego5:not(:last-child){margin-right:0.5rem;}}

package/cjs/radio-button/radio-button.styles_1c4v6v.css CHANGED Viewed

@@ -1,8 +1,8 @@
-.c22ppgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}.c22ppgr[data-display-size="small"]{height:1.5rem;width:1.5rem;}.c22ppgr[data-display-size="default"]{height:2rem;width:2rem;}
+@layer fds{.c22ppgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}.c22ppgr[data-display-size="small"]{height:1.5rem;width:1.5rem;}.c22ppgr[data-display-size="default"]{height:2rem;width:2rem;}
 .iwrt33w{height:100%;width: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);}
 .u16bhkcz{color:var(--fds-colour-icon-subtle);}
 .ubjq3ci{color:var(--fds-colour-icon-disabled-subtle);}
 .crf4g3g{color:var(--fds-colour-icon-selected);}
 .c1bv24bs{color:var(--fds-colour-icon-selected-disabled);}
 .ie6234c{position:absolute;height:100%;width:100%;cursor:not-allowed;z-index:1;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
-.i1pcowd9{cursor:pointer;}@media (pointer: fine){.i1pcowd9:hover+svg{color:var(--fds-colour-icon-hover);}}
+.i1pcowd9{cursor:pointer;}@media (pointer: fine){.i1pcowd9:hover+svg{color:var(--fds-colour-icon-hover);}}}

package/cjs/schedule/const.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";exports.CELL_HEIGHT=48,exports.HEADER_HEIGHT=130,exports.MIN_COLUMN_WIDTH=280,exports.SLOT_INTERVAL=30,exports.TIME_INDICATOR_WIDTH=42;
+"use strict";exports.CELL_HEIGHT=48,exports.SLOT_INTERVAL=30;
 //# sourceMappingURL=const.js.map

package/cjs/schedule/const.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"const.js","sources":["../../../src/schedule/const.ts"],"sourcesContent":["export const CELL_HEIGHT = 48; //the height of each cell in the grid (unit: px)\nexport const TIME_INDICATOR_WIDTH = 42; //the width of the time indicator column (unit: px)\nexport const HEADER_HEIGHT = 130; //the height of the header (unit: px)\nexport const SLOT_INTERVAL = 30; // minutes per slot\nexport const MIN_COLUMN_WIDTH = 280; //the min width of the column (unit: px)\n\n// Constants for slot positioning in week view\nexport const SLOT_WIDTH = 30;\nexport const SLOT_GAP = 2;\nexport const MAX_VISIBLE_SLOTS = 3;\n"],"names":[],"mappings":"iCAA2B,~~yBAEE,6BAEG,0BADH,gCAFO~~"}
1	+ {"version":3,"file":"const.js","sources":["../../../src/schedule/const.ts"],"sourcesContent":["export const CELL_HEIGHT = 48; //the height of each cell in the grid (unit: px)\nexport const TIME_INDICATOR_WIDTH = 42; //the width of the time indicator column (unit: px)\nexport const HEADER_HEIGHT = 130; //the height of the header (unit: px)\nexport const SLOT_INTERVAL = 30; // minutes per slot\nexport const MIN_COLUMN_WIDTH = 280; //the min width of the column (unit: px)\n\n// Constants for slot positioning in week view\nexport const SLOT_WIDTH = 30;\nexport const SLOT_GAP = 2;\nexport const MAX_VISIBLE_SLOTS = 3;\n"],"names":[],"mappings":"iCAA2B,yBAGE"}

package/cjs/schedule/schedule-day-view/schedule-day-view.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("../../util/date-helper.js"),l=require("../../util/time-helper.js"),s=require("../shared/hooks.js"),o=require("../shared/utils.js"),a=require("../shared/with-optional-popover.js"),c=require("../time-indicator/time-indicator.js"),d=require("./schedule-day-view.styles.js");const{ServiceContainer:u,ServiceColumn:m,ArrowContainer:h,ArrowButton:p,ServiceHeaderContainer:j,Title:T,Description:x,SlotContent:f,SlotTime:v,SlotAvailability:C,SlotCell:S,EmptySlot:g,SlotGrid:y,Timeline:$,SlotColumn:k,ScheduleContainer:b,LoadingContainer:q,HeaderContainer:P,BlankCell:w,BodyContainer:H}=d;exports.ScheduleDayView=({serviceData:d,isMobile:L,onNextService:I,onPrevService:M,onEmptySlotClick:D,showPrevArrow:R,showNextArrow:W,minTime:A,maxTime:O,initialScrollTime:B,containerRef:N,loading:z,emptySlotPopover:E,blockedMessage:F="Unavailable"})=>{const G=s.useTimelineOffset(A,O),U=s.useInitialScroll(z,A,B),V=i.useRef(null),J=i.useMemo((()=>l.TimeHelper.generateTimings(30,"24hr",A,O)),[A,O]),K=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&o.isTimeCellCovered(e.slots,r))(e,i)&&E){const r={startTime:i,endTime:n.DateHelper.addMinutesToTime(i,30),name:e.name};return E(r)}},Q=(r,i)=>{const t=l.TimeHelper.calculateDuration(r.startTime,r.endTime),n=o.calculateSlotOffset(r.startTime,i);return e.jsx(f,{$status:r.status,$duration:t,$offsetTop:n,onClick:e=>r.onClick&&r.onClick(r,e),children:t>=15&&e.jsxs(e.Fragment,{children:[e.jsxs(v,{children:[l.TimeHelper.parseInput(r.startTime,"12hr"),"–"," ",l.TimeHelper.parseInput(r.endTime,"12hr")]}),e.jsx(C,{children:"blocked"===r.status?F:`${r.booked} / ${r.capacity}`})]})})},X=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=l.TimeHelper.timeToMinutes(r),t=o.minutesToTime(i+30);return o.findSlotsStartingInTimeRange(e.slots,r,t)})(r,i);return t.length>0?e.jsx(S,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const l=K(r,t,i);return e.jsx(a.WithOptionalPopover,{containerRef:N,customPopover:l,children:Q(t,i)},`${t.id}-${n}`)}))},i):e.jsx(S,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(D){const i=n.DateHelper.addMinutesToTime(e,30);D({startTime:e,endTime:i,name:r})}})(i,r.name),children:e.jsx(a.WithOptionalPopover,{containerRef:N,customPopover:K(r,void 0,i),children:e.jsx(g,{})})},i)};return e.jsx(b,{children:z?e.jsx(q,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(P,{ref:V,onScroll:e=>{V.current&&U.current&&(U.current.scrollLeft=V.current.scrollLeft)},$isMobile:L,children:[e.jsx(w,{}),e.jsx(u,{$columnCount:d.length,children:d.map((i=>e.jsxs(m,{children:[L&&e.jsx(h,{children:R&&M&&e.jsx(p,{styleType:"light",sizeType:"small",onClick:M,"aria-label":"Previous service",icon:e.jsx(r.ChevronLeftIcon,{"aria-hidden":!0})})}),e.jsxs(j,{children:[e.jsx(T,{children:i.name}),e.jsxs(x,{children:[e.jsx("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),L&&W&&I&&e.jsx(p,{styleType:"light",sizeType:"small",onClick:I,"aria-label":"Next service",icon:e.jsx(r.ChevronRightIcon,{"aria-hidden":!0})})]},i.id)))})]}),e.jsxs(H,{ref:U,onScroll:e=>{if(V.current&&U.current){const e=17,r=U.current.scrollWidth-U.current.clientWidth-e,i=U.current.scrollLeft;i>r?(U.current.scrollLeft=r,V.current.scrollLeft=r):V.current.scrollLeft=i}},children:[e.jsx(c.TimeIndicator,{minTime:A,maxTime:O,format:"24hr",timelineOffset:G}),e.jsxs(y,{$columnCount:d.length,children:[null!==G&&e.jsx($,{$top:G}),d.map((r=>e.jsx(k,{children:J.map((e=>X(r,e)))},r.id)))]})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),s=require("clsx"),r=require("react"),i=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),l=require("../../button/button.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var n=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var o=require("../../typography/index.js"),a=require("../../util/date-helper.js"),c=require("../../util/time-helper.js"),d=require("../shared/hooks.js"),u=require("../shared/utils.js"),m=require("../schedule-slot-content/schedule-slot-content.js"),h=require("../shared/with-optional-popover.js"),p=require("../time-indicator/time-indicator.js"),j=require("./schedule-day-view.styles.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=v(s);const f=({slot:t,timeSlotStart:s,blockedMessage:r})=>{const i=u.calculateSlotOffset(t.startTime,s),l=c.TimeHelper.calculateDuration(t.startTime,t.endTime);return e.jsx(m.ScheduleSlotContent,{slot:t,offsetTop:i,tokens:j.tokens.slotContent,classNames:{container:j.slotContent,blocked:j.slotContentBlocked,available:j.slotContentAvailable},children:l>=15&&e.jsxs(e.Fragment,{children:[e.jsxs("span",{className:j.slotTime,children:[c.TimeHelper.parseInput(t.startTime,"12hr"),"–"," ",c.TimeHelper.parseInput(t.endTime,"12hr")]}),e.jsx("span",{className:j.slotAvailability,children:"blocked"===t.status?r:`${t.booked} / ${t.capacity}`})]})})};exports.ScheduleDayView=({serviceData:s,isMobile:m,onNextService:v,onPrevService:T,onEmptySlotClick:y,showPrevArrow:C,showNextArrow:g,minTime:q,maxTime:N,initialScrollTime:S,containerRef:b,loading:k,emptySlotPopover:M,blockedMessage:w="Unavailable"})=>{const P=d.useTimelineOffset(q,N),R=d.useInitialScroll(k,q,S),$=r.useRef(null),H=r.useRef(null),L=r.useRef(null),A=r.useRef(null),B=r.useMemo((()=>c.TimeHelper.generateTimings(30,"24hr",q,N)),[q,N]);n.useApplyStyle(H,{[j.tokens.serviceContainer.columnCount]:`${s.length}`}),n.useApplyStyle(L,{[j.tokens.slotGrid.columnCount]:`${s.length}`}),n.useApplyStyle(A,{[j.tokens.timeline.top]:null===P?null:`${P}px`});const D=(e,t,s)=>{if(null==t?void 0:t.customPopover)return t.customPopover;if(!((e,t)=>!!e.slots&&u.isTimeCellCovered(e.slots,t))(e,s)&&M){const t={startTime:s,endTime:a.DateHelper.addMinutesToTime(s,30),name:e.name};return M(t)}},I=(t,s)=>e.jsx(f,{slot:t,timeSlotStart:s,blockedMessage:w}),O=e=>x.default(j.slotCell,e.endsWith(":00")&&j.slotCellDashed),W=(t,s)=>e.jsx("div",{className:O(s),onClick:()=>((e,t)=>{if(y){const s=a.DateHelper.addMinutesToTime(e,30);y({startTime:e,endTime:s,name:t})}})(s,t.name),"data-testid":`empty-slot-${t.id}-${s}`,children:e.jsx(h.WithOptionalPopover,{containerRef:b,customPopover:D(t,void 0,s),children:e.jsx("div",{className:j.emptySlot})})},s),z=(t,s)=>{const r=((e,t)=>{if(!e.slots)return[];const s=c.TimeHelper.timeToMinutes(t),r=u.minutesToTime(s+30);return u.findSlotsStartingInTimeRange(e.slots,t,r)})(t,s);return r.length>0?((t,s,r)=>e.jsx("div",{className:O(s),children:r.map(((r,i)=>e.jsx(h.WithOptionalPopover,{containerRef:b,customPopover:D(t,r,s),children:I(r,s)},`${r.id}-${i}`)))},s))(t,s,r):W(t,s)};return e.jsx("div",{className:j.scheduleContainer,children:k?e.jsx("div",{className:j.loadingContainer,children:e.jsx(i.ThemedLoadingSpinner,{"data-testid":"loading-spinner"})}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{ref:$,onScroll:e=>{$.current&&R.current&&(R.current.scrollLeft=$.current.scrollLeft)},className:x.default(j.headerContainer,m&&j.headerContainerMobile),children:[e.jsx("div",{className:j.blankCell}),e.jsx("div",{ref:H,className:j.serviceContainer,children:s.map((s=>e.jsxs("div",{className:j.serviceColumn,children:[m&&e.jsx("div",{className:j.arrowContainer,children:C&&T&&e.jsx(l.Button,{className:j.arrowButton,styleType:"light",sizeType:"small",onClick:T,"aria-label":"Previous service",icon:e.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})})}),e.jsxs("div",{className:j.serviceHeaderContainer,children:[e.jsx(o.Typography.BodyMD,{className:j.title,children:s.name}),e.jsxs(o.Typography.BodySM,{className:j.description,children:[e.jsx("span",{children:s.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),m&&g&&v&&e.jsx(l.Button,{className:j.arrowButton,styleType:"light",sizeType:"small",onClick:v,"aria-label":"Next service",icon:e.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]},s.id)))})]}),e.jsxs("div",{className:j.bodyContainer,ref:R,onScroll:e=>{if($.current&&R.current){const e=17,t=R.current.scrollWidth-R.current.clientWidth-e,s=R.current.scrollLeft;s>t?(R.current.scrollLeft=t,$.current.scrollLeft=t):$.current.scrollLeft=s}},children:[e.jsx(p.TimeIndicator,{minTime:q,maxTime:N,format:"24hr",timelineOffset:P}),e.jsxs("div",{ref:L,className:j.slotGrid,children:[null!==P&&e.jsx("div",{ref:A,className:j.timeline}),s.map((t=>e.jsx("div",{className:j.slotColumn,children:B.map((e=>z(t,e)))},t.id)))]})]})]})})};
 //# sourceMappingURL=schedule-day-view.js.map