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

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

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

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

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

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

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

package/cjs/navbar/navbar-items.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),t=require("../menu/menu.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var r=require("../util/simple-id-generator.js");require("../util/string-helper.js");var s=require("./menu.js"),l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:h})=>{const[p,j]=i.useState(-1),[m,x]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),[k]=i.useState((()=>r.SimpleIdGenerator.generate()));i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(x(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const L=(e,n)=>i=>{var t;if(i.stopPropagation(),u&&(null===(t=e.subMenu)||void 0===t?void 0:t.length)){const e=!(p===n&&m);j(n),x(e)}h(i,e)},$=(e,n)=>{e.stopPropagation(),h(e,n),x(!1),j(-1)},f=(e,i)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),I=e=>n.jsx(s.Menu,{items:e,onItemClick:$}),M=(i,r)=>{const{children:s,options:a,subMenu:h}=i,j=e.__rest(i,["children","options","subMenu"]),x=!!(null==h?void 0:h.length),v=(e=>{var n;return e.id===d||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===d))})(i),$=u&&x&&p===r&&m,M=!u&&x&&b===r||$,q=null!==b?b===r:v,C=!c&&q,S=q?u?"bold":"semibold":"regular",_=u?`link__mobile-${r+1}`:`link__${r+1}`,y=()=>C?n.jsx(l.LinkIndicator,{"data-testid":`${_}-indicator`,$selected:q}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:x?(()=>{const e=`navbar-submenu-${k}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":_,weight:S,$selected:q,underlineStyle:"none"},j,{"aria-current":v?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:L(i,r)},a,{children:[n.jsx(l.LinkLabel,{children:s}),y(),u&&x?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${_}-expand-collapse-button`,$selected:$,focusHighlight:!1,focusOutline:"browser","aria-label":$?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:q})})}):null]})),$&&I(h)]}):n.jsx(t.Menu,{position:"bottom",customOffset:0,menuContent:f(h,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(r),onPopoverDismiss:()=>{g((e=>e===r?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":_,weight:S,$selected:q,"aria-haspopup":"menu","aria-expanded":M},a,{children:[n.jsx(l.LinkLabel,{children:s}),y()]}))})})():n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":_,weight:S,$selected:q,underlineStyle:"none"},j,{"aria-current":v?"page":void 0,onClick:L(i,r)},a,{children:[n.jsx(l.LinkLabel,{children:s}),y()]}))},r)},q=()=>a.map(((e,i)=>{var t;return"component"===e.itemType?n.jsx("li",{children:null!==(t=e.children)&&void 0!==t?t:null},i):M(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:v,children:q()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:q()}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),r=require("../menu/menu.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("./menu.js"),l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:h})=>{const[p,j]=i.useState(-1),[m,x]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),k=t.useId();i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(x(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const L=(e,n)=>i=>{var r;if(i.stopPropagation(),u&&(null===(r=e.subMenu)||void 0===r?void 0:r.length)){const e=!(p===n&&m);j(n),x(e)}h(i,e)},$=(e,n)=>{e.stopPropagation(),h(e,n),x(!1),j(-1)},f=(e,i)=>n.jsx(r.Menu.Content,{id:i,children:n.jsx(r.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(r.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),I=e=>n.jsx(s.Menu,{items:e,onItemClick:$}),M=(i,t)=>{const{children:s,options:a,subMenu:h}=i,j=e.__rest(i,["children","options","subMenu"]),x=!!(null==h?void 0:h.length),v=(e=>{var n;return e.id===d||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===d))})(i),$=u&&x&&p===t&&m,M=!u&&x&&b===t||$,q=null!==b?b===t:v,C=!c&&q,_=q?u?"bold":"semibold":"regular",O=u?`link__mobile-${t+1}`:`link__${t+1}`,w=()=>C?n.jsx(l.LinkIndicator,{"data-testid":`${O}-indicator`,$selected:q}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:x?(()=>{const e=`navbar-submenu-${k}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":O,weight:_,$selected:q},j,{"aria-current":v?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:L(i,t)},a,{children:[n.jsx(l.LinkLabel,{children:s}),w(),u&&x?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${O}-expand-collapse-button`,$selected:$,focusHighlight:!1,focusOutline:"browser","aria-label":$?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:q})})}):null]})),$&&I(h)]}):n.jsx(r.Menu,{position:"bottom",customOffset:0,menuContent:f(h,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(t),onPopoverDismiss:()=>{g((e=>e===t?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":O,weight:_,$selected:q,"aria-haspopup":"menu","aria-expanded":M},a,{children:[n.jsx(l.LinkLabel,{children:s}),w()]}))})})():n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":O,weight:_,$selected:q},j,{"aria-current":v?"page":void 0,onClick:L(i,t)},a,{children:[n.jsx(l.LinkLabel,{children:s}),w()]}))},t)},q=()=>a.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):M(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:v,children:q()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:q()}):n.jsx(n.Fragment,{})};
 //# sourceMappingURL=navbar-items.js.map

package/cjs/navbar/navbar-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Menu as DesktopMenu } from \"../menu\";\nimport type { TypographyWeight } from \"../typography\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { Menu as MobileMenu } from \"./menu\";\nimport {\n    ChevronIcon,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport type {\n    NavItemCommonProps,\n    NavItemLinkProps,\n    NavItemProps,\n} from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n    const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n    const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n        null\n    );\n    const listRef = useRef<HTMLUListElement>(null);\n    const [instanceId] = useState(() => SimpleIdGenerator.generate());\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const resetAll = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n        setOpenSubMenuIndex(null);\n    };\n\n    const closeMobileSubMenu = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n    };\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n        if (item.id === selectedId) return true;\n        if (item.subMenu?.length) {\n            return !!item.subMenu.find((s) => s.id === selectedId);\n        }\n        return false;\n    };\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                resetAll();\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile && item.subMenu?.length) {\n                const nextExpanded = !(selectedIndex === index && showSubMenu);\n                setSelectedIndex(index);\n                setShowSubMenu(nextExpanded);\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n        closeMobileSubMenu();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && openSubMenuIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            openSubMenuIndex !== null\n                ? openSubMenuIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={isMobileExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                weight={textWeight}\n                $selected={selected}\n                underlineStyle=\"none\"\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = () => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            weight={textWeight}\n                            $selected={selected}\n                            underlineStyle=\"none\"\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position=\"bottom\"\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => setOpenSubMenuIndex(index)}\n                    onPopoverDismiss={() => {\n                        setOpenSubMenuIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu ? renderLinkWithSubmenu() : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","SimpleIdGenerator","generate","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
+{"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Menu as DesktopMenu } from \"../menu\";\nimport type { TypographyWeight } from \"../typography\";\nimport { useId } from \"../util\";\nimport { Menu as MobileMenu } from \"./menu\";\nimport {\n    ChevronIcon,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport type {\n    NavItemCommonProps,\n    NavItemLinkProps,\n    NavItemProps,\n} from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n    const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n    const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n        null\n    );\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const resetAll = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n        setOpenSubMenuIndex(null);\n    };\n\n    const closeMobileSubMenu = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n    };\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n        if (item.id === selectedId) return true;\n        if (item.subMenu?.length) {\n            return !!item.subMenu.find((s) => s.id === selectedId);\n        }\n        return false;\n    };\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                resetAll();\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile && item.subMenu?.length) {\n                const nextExpanded = !(selectedIndex === index && showSubMenu);\n                setSelectedIndex(index);\n                setShowSubMenu(nextExpanded);\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n        closeMobileSubMenu();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && openSubMenuIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            openSubMenuIndex !== null\n                ? openSubMenuIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={isMobileExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = () => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            weight={textWeight}\n                            $selected={selected}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position=\"bottom\"\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => setOpenSubMenuIndex(index)}\n                    onPopoverDismiss={() => {\n                        setOpenSubMenuIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu ? renderLinkWithSubmenu() : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","_jsxs","_Fragment","Object","assign","weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"kaAuC2B,EACvBA,QACAC,aACAC,UAAS,EACTC,kBACAC,qBAAoB,EACpBC,kBAKA,MAAOC,EAAeC,GAAoBC,EAAAA,UAAiB,IACpDC,EAAaC,GAAkBF,EAAAA,UAAkB,IACjDG,EAAkBC,GAAuBJ,EAAAA,SAC5C,MAEEK,EAAUC,EAAAA,OAAyB,MACnCC,EAAaC,EAAAA,QAwBnBC,EAAAA,WAAU,KACN,MAAMC,EAAsBC,IAEpBN,EAAQO,UACPP,EAAQO,QAAQC,SAASF,EAAMG,UAtBxCZ,GAAe,GACfH,GAAiB,GACjBK,EAAoB,MAuBhB,EAGJ,OADAW,SAASC,iBAAiB,QAASN,GAAoB,GAChD,KACHK,SAASE,oBAAoB,QAASP,GAAoB,EAAK,CAClE,GACF,IAKH,MAAMQ,EAAkB,CAACC,EAA2BC,IACxCT,UAIJ,GAHAA,EAAMU,kBAGF3B,IAAsB,QAAZ4B,EAAAH,EAAKI,eAAO,IAAAD,OAAA,EAAAA,EAAEE,QAAQ,CAChC,MAAMC,IAAiB3B,IAAkBsB,GAASnB,GAClDF,EAAiBqB,GACjBlB,EAAeuB,EACnB,CAEA5B,EAAYc,EAAOQ,EAAK,EAI1BO,EAA2B,CAC7Bf,EACAQ,KAEAR,EAAMU,kBACNxB,EAAYc,EAAOQ,GAlDnBjB,GAAe,GACfH,GAAiB,EAkDG,EAMlB4B,EAAuB,CACzBJ,EACAK,IAEAC,EAAAA,IAACC,OAAYC,QAAO,CAACC,GAAIJ,EAASK,SAC9BJ,MAACC,EAAAA,KAAYI,QAAO,CAACC,aAAa,EAAKF,SAClCV,EAAQa,KAAI,CAACjB,EAAMkB,IAChBR,EAAAA,IAACC,EAAAA,KAAYQ,KAAI,CAEbC,KAAMpB,EAAKoB,KAAIN,SAEdd,EAAKc,UAHD,GAAGd,EAAKa,MAAMK,WAUjCG,EAAuBjB,GACzBM,EAAAA,IAACY,EAAAA,MAAWjD,MAAO+B,EAAS1B,YAAa6B,IAGvCgB,EAAiB,CAACvB,EAA2BC,KAC/C,MAAMa,SAAEA,EAAQU,QAAEA,EAAOpB,QAAEA,GAA+BJ,EAAnByB,EAAcC,EAAAA,OAAK1B,EAApD,CAAA,WAAA,UAAA,YAEA2B,KAAevB,aAAO,EAAPA,EAASC,QAExBuB,EAhFY,CAAC5B,UACnB,OAAIA,EAAKa,KAAOvC,MACA,UAAZ0B,EAAKI,eAAO,IAAAD,OAAA,EAAAA,EAAEE,WACLL,EAAKI,QAAQyB,MAAMC,GAAMA,EAAEjB,KAAOvC,GAEnC,EA2EYyD,CAAc/B,GAOhCgC,EACFzD,GAAUoD,GAAchD,IAAkBsB,GAASnB,EAEjDmD,GAND1D,GAAUoD,GAAc3C,IAAqBiB,GAMV+B,EAElCE,EACmB,OAArBlD,EACMA,IAAqBiB,EACrB2B,EAEJO,GAAiB1D,GAAqByD,EAEtCE,EAA+BF,EAC/B3D,EACI,OACA,WACJ,UAEA8D,EAAS9D,EACT,gBAAgB0B,EAAQ,IACxB,SAASA,EAAQ,IAEjBqC,EAAkB,IACpBH,EACIzB,EAAAA,IAAC6B,EAAAA,6BACgB,GAAGF,cAAkBG,UACvBN,IAEf,KA2FR,OACIxB,MAAC+B,EAAAA,SAAQ,CAAAC,gBAA8BlE,EAAesC,SACjDa,EA5DqB,MAC1B,MAAMlB,EAAY,kBAAkBrB,KAAcY,EAAKa,KAEvD,OAAItC,EAEIoE,OAAAC,EAAAA,SAAA,CAAA9B,SAAA,CACI6B,EAAAA,KAACxB,EAAAA,KAAI0B,OAAAC,OAAA,CAAA,cACYT,EACbU,OAAQX,EAAUI,UACPN,GACPT,EAAc,CAAA,eACJG,EAAkB,YAASoB,EAAS,gBACpC,OAAM,gBACLf,EACfgB,QAASlD,EAAgBC,EAAMC,IAC3BuB,EAAO,CAAAV,SAAA,CAEXJ,EAAAA,IAACwC,EAAAA,UAAS,CAAApC,SAAEA,IACXwB,IAhDjB/D,GAAUoD,EACNjB,EAAAA,IAACyC,EAAAA,kBAAiB,CAAArC,SACdJ,EAAAA,IAAC0C,EAAAA,qBAAoB,CAAA,cACJ,GAAGf,2BAA+BG,UACpCR,EACXqB,gBAAgB,EAChBC,aAAa,UAAS,aACVtB,EAAmB,WAAa,kBAE5CtB,EAAAA,IAAC6C,EAAAA,YAAW,CAAAf,UAAYN,QAGhC,SAwCSF,GAAoBX,EAAoBjB,MAMjDM,EAAAA,IAACC,QACG6C,SAAS,SACTC,aAAc,EACdC,YAAalD,EAAqBJ,EAAUK,GAC5CkD,kBACAC,SAAS,EACTC,gBAAiB,IAAM5E,EAAoBgB,GAC3C6D,iBAAkB,KACd7E,GAAqB8E,GACjBA,IAAS9D,EAAQ,KAAO8D,GAC3B,WAGLpB,EAAAA,KAACqB,EAAAA,WAAUnB,OAAAC,OAAA,CACPmB,KAAK,SACLC,SAAU,EAAC,cACE7B,EACbU,OAAQX,EAAUI,UACPN,EAAQ,gBACL,OAAM,gBACLD,GACXT,aAEJd,EAAAA,IAACwC,EAAAA,UAAS,CAAApC,SAAEA,IACXwB,SAEK,EAMA6B,GA3ElBxB,OAACxB,EAAAA,KAAI0B,OAAAC,OAAA,CACDoB,SAAU,gBACG7B,EACbU,OAAQX,EAAUI,UACPN,GACPT,EAAc,CAAA,eACJG,EAAkB,YAASoB,EACzCC,QAASlD,EAAgBC,EAAMC,IAC3BuB,EAAO,CAAAV,SAAA,CAEXJ,EAAAA,IAACwC,EAAAA,UAAS,CAAApC,SAAEA,IACXwB,SA+DUrC,EAEJ,EAIbmE,EAAc,IAChB/F,EAAM4C,KAAI,CAACjB,EAAMC,WACb,MACS,cADDD,EAAKqE,SAEE3D,EAAAA,IAAA,KAAA,CAAAI,iBAAiBX,EAAAH,EAAKc,wBAAY,MAAzBb,GAITsB,EAAevB,EAA6BC,MAKnE,OAAI5B,GAASA,EAAMgC,OAAS,EACjB9B,EACHmC,EAAAA,IAAC4D,gBAAa,CAACC,IAAKrF,EAAO4B,SAAGsD,MAE9B1D,EAAAA,IAAC8D,WAAQD,IAAKrF,EAAOuF,WAAcjG,EAAesC,SAC7CsD,MAKN1D,EAAAA,kBAAK"}

package/cjs/otp-input/otp-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("../form/form-label.js"),a=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var i=require("../util/simple-id-generator.js"),s=require("../util/string-helper.js"),o=require("./otp-input.styles.js"),l=require("./utils.js");const u=t.forwardRef(((u,d)=>{var{id:c,value:p=[],"data-testid":f,className:v,cooldownDuration:g,actionButtonProps:m,errorMessage:y,numOfInput:h,prefix:j,onChange:w,onCooldownStart:b,onCooldownEnd:x,otpOnly:O,onCountdownChange:C}=u,$=e.__rest(u,["id","value","data-testid","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange"]);const D=null!=m?m:{},{disabled:I,onClick:q,styleType:T="secondary"}=D,P=e.__rest(D,["disabled","onClick","styleType"]),E=t.useRef([]),R=t.useRef(w),[A,S]=t.useState(new Array(h).fill("")),[k,_]=t.useState(g),[B,H]=t.useState(new Date),[M]=t.useState((()=>i.SimpleIdGenerator.generate())),F=!!y,L=`${M}-error`,N=`${M}-timer`;t.useEffect((()=>{var e;return null===(e=null==E?void 0:E.current[0])||void 0===e||e.focus(),document.addEventListener("paste",K),()=>document.removeEventListener("paste",K)}),[]),t.useEffect((()=>{if(0!==g){b&&b();const e=z();return()=>e()}}),[B]),t.useImperativeHandle(d,(()=>({startCooldown:()=>{H(new Date),_(g)}}))),t.useEffect((()=>{R.current=w}),[w]),t.useEffect((()=>{p.length===h&&S(p)}),[p]);const V=e=>{if(e&&l.validateUserInput(e,h)){const r=e.split("");return S(r),R.current&&R.current(r),!0}return!1},U=e=>r=>{var t;const n=r.target.value,a=A.every((e=>""===e)),i=l.stripOtpFromAutofill(n,h,j);if(a&&V(i))return;const s=n.replace(/[^0-9]/g,"");if(l.validateUserInput(s)){const r=[...A];r[e]=s.substring(s.length-1),null===(t=E.current[e+1])||void 0===t||t.focus(),S(r),w&&w(r)}},G=e=>r=>{var t,n,a;const{key:i,code:s}=r;if("Backspace"===i||"Backspace"===s){const r=[...A];""!==r[e]?r[e]="":0!==e&&(r[e-1]="",null===(t=E.current[e-1])||void 0===t||t.focus()),S(r),w&&w(r)}else"ArrowRight"===r.code?null===(n=E.current[e+1])||void 0===n||n.focus():"ArrowLeft"===r.code&&(null===(a=E.current[e-1])||void 0===a||a.focus())},K=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=l.stripOtpFromAutofill(r,h,j);V(t)||e.preventDefault()},W=()=>{const e=Date.now(),r=1e3*g;return e<B.valueOf()+r},z=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*g,n=Math.ceil((B.valueOf()+t-r)/1e3);_(n),n<=0?(x&&x(),clearInterval(e)):C&&C(n)}),1e3);return()=>{clearInterval(e)}},J=(e,r,t)=>t?`${t}-${r}-${e+1}`:`${r}-${e+1}`,Q=e=>`${e} second${1===e?"":"s"}`;return r.jsxs(o.Wrapper,{id:c,"data-testid":f,className:v,children:[r.jsxs(o.InputContainer,{role:"group","aria-label":`${h}-digit OTP input field`,children:[j&&r.jsxs(o.Prefix,{forwardedAs:"span","data-testid":"otp-prefix",weight:"semibold",children:[r.jsx(a.VisuallyHidden,{children:"O T P prefix"}),`${j.value} ${j.separator}`]}),A.map(((e,t)=>r.jsx(o.InputField,Object.assign({id:J(t,"otp-input",c),"data-testid":J(t,"otp-input",f),"aria-label":`${s.StringHelper.formatOrdinal(t+1)} digit`,"aria-invalid":F,"aria-describedby":F?L:void 0,ref:e=>E.current[t]=e,type:"text",inputMode:"numeric",value:e,error:F,onChange:U(t),onKeyDown:G(t),autoComplete:"off"},$),t)))]}),y&&r.jsx(n.FormErrorMessage,{id:L,children:y}),r.jsxs(a.VisuallyHidden,{role:"timer",id:N,children:[Q(k)," remaining"]}),r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:k>0?"":"Ready to resend OTP"}),!O&&r.jsx(o.CTAButton,Object.assign({styleType:T,type:"button"},P,{onClick:e=>{S(new Array(h).fill("")),W()||(H(new Date),_(g)),q&&q(e)},disabled:I||W()},P.children?{children:P.children}:{children:k>0?`Resend OTP in ${Q(k)}`:"Resend OTP","aria-label":k>0?`Resend OTP in ${Q(g)}`:"Resend OTP","aria-describedby":N}))]})}));exports.OtpInput=u;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("../form/form-label.js"),a=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var i=require("../util/simple-id-generator.js"),s=require("../util/string-helper.js");require("@react-aria/live-announcer");var o=require("./otp-input.styles.js"),l=require("./utils.js");const u=t.forwardRef(((u,d)=>{var{id:c,value:p=[],"data-testid":f,className:v,cooldownDuration:y,actionButtonProps:g,errorMessage:m,numOfInput:h,prefix:j,onChange:w,onCooldownStart:b,onCooldownEnd:x,otpOnly:O,onCountdownChange:C}=u,$=e.__rest(u,["id","value","data-testid","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange"]);const q=null!=g?g:{},{disabled:D,onClick:I,styleType:T="secondary"}=q,P=e.__rest(q,["disabled","onClick","styleType"]),E=t.useRef([]),R=t.useRef(w),[A,k]=t.useState(new Array(h).fill("")),[S,_]=t.useState(y),[B,H]=t.useState(new Date),M=i.useId(),F=!!m,L=`${M}-error`,N=`${M}-timer`;t.useEffect((()=>{var e;return null===(e=null==E?void 0:E.current[0])||void 0===e||e.focus(),document.addEventListener("paste",W),()=>document.removeEventListener("paste",W)}),[]),t.useEffect((()=>{if(0!==y){b&&b();const e=G();return()=>e()}}),[B]),t.useImperativeHandle(d,(()=>({startCooldown:()=>{H(new Date),_(y)}}))),t.useEffect((()=>{R.current=w}),[w]),t.useEffect((()=>{p.length===h&&k(p)}),[p]);const V=e=>{if(e&&l.validateUserInput(e,h)){const r=e.split("");return k(r),R.current&&R.current(r),!0}return!1},U=e=>r=>{var t;const n=r.target.value,a=A.every((e=>""===e)),i=l.stripOtpFromAutofill(n,h,j);if(a&&V(i))return;const s=n.replace(/[^0-9]/g,"");if(l.validateUserInput(s)){const r=[...A];r[e]=s.substring(s.length-1),null===(t=E.current[e+1])||void 0===t||t.focus(),k(r),w&&w(r)}},K=e=>r=>{var t,n,a;const{key:i,code:s}=r;if("Backspace"===i||"Backspace"===s){const r=[...A];""!==r[e]?r[e]="":0!==e&&(r[e-1]="",null===(t=E.current[e-1])||void 0===t||t.focus()),k(r),w&&w(r)}else"ArrowRight"===r.code?null===(n=E.current[e+1])||void 0===n||n.focus():"ArrowLeft"===r.code&&(null===(a=E.current[e-1])||void 0===a||a.focus())},W=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=l.stripOtpFromAutofill(r,h,j);V(t)||e.preventDefault()},z=()=>{const e=Date.now(),r=1e3*y;return e<B.valueOf()+r},G=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*y,n=Math.ceil((B.valueOf()+t-r)/1e3);_(n),n<=0?(x&&x(),clearInterval(e)):C&&C(n)}),1e3);return()=>{clearInterval(e)}},J=(e,r,t)=>t?`${t}-${r}-${e+1}`:`${r}-${e+1}`,Q=e=>`${e} second${1===e?"":"s"}`;return r.jsxs(o.Wrapper,{id:c,"data-testid":f,className:v,children:[r.jsxs(o.InputContainer,{role:"group","aria-label":`${h}-digit OTP input field`,children:[j&&r.jsxs(o.Prefix,{forwardedAs:"span","data-testid":"otp-prefix",weight:"semibold",children:[r.jsx(a.VisuallyHidden,{children:"O T P prefix"}),`${j.value} ${j.separator}`]}),A.map(((e,t)=>r.jsx(o.InputField,Object.assign({id:J(t,"otp-input",c),"data-testid":J(t,"otp-input",f),"aria-label":`${s.StringHelper.formatOrdinal(t+1)} digit`,"aria-invalid":F,"aria-describedby":F?L:void 0,ref:e=>E.current[t]=e,type:"text",inputMode:"numeric",value:e,error:F,onChange:U(t),onKeyDown:K(t),autoComplete:"off"},$),t)))]}),m&&r.jsx(n.FormErrorMessage,{id:L,children:m}),r.jsxs(a.VisuallyHidden,{role:"timer",id:N,children:[Q(S)," remaining"]}),r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:S>0?"":"Ready to resend OTP"}),!O&&r.jsx(o.CTAButton,Object.assign({styleType:T,type:"button"},P,{onClick:e=>{k(new Array(h).fill("")),z()||(H(new Date),_(y)),I&&I(e)},disabled:D||z()},P.children?{children:P.children}:{children:S>0?`Resend OTP in ${Q(S)}`:"Resend OTP","aria-label":S>0?`Resend OTP in ${Q(y)}`:"Resend OTP","aria-describedby":N}))]})}));exports.OtpInput=u;
 //# sourceMappingURL=otp-input.js.map

package/cjs/otp-input/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","sources":["../../../src/otp-input/otp-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport {\n    CTAButton,\n    InputContainer,\n    InputField,\n    Prefix,\n    Wrapper,\n} from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n    {\n        id,\n        value = [],\n        \"data-testid\": dataTestId,\n        className,\n        cooldownDuration,\n        actionButtonProps,\n        errorMessage,\n        numOfInput,\n        prefix,\n        onChange,\n        onCooldownStart,\n        onCooldownEnd,\n        otpOnly,\n        onCountdownChange,\n        ...otherProps\n    }: OtpInputProps,\n    ref: React.Ref<OtpInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        disabled,\n        onClick,\n        styleType = \"secondary\",\n        ...otherCtaProps\n    } = actionButtonProps ?? {};\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    const onChangeRef = useRef(onChange);\n\n    const [otpValues, setOtpValues] = useState<string[]>(\n        new Array(numOfInput).fill(\"\")\n    );\n    const [countDown, setCountDown] = useState<number>(cooldownDuration);\n    const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n    const [internalId] = useState(() => SimpleIdGenerator.generate());\n\n    const hasError = !!errorMessage;\n    const errorId = `${internalId}-error`;\n    const timerId = `${internalId}-timer`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        inputRefs?.current[0]?.focus();\n        document.addEventListener(\"paste\", handlePaste);\n        return () => document.removeEventListener(\"paste\", handlePaste);\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n    }, [lastCtaTimestamp]);\n\n    useImperativeHandle(ref, () => ({\n        startCooldown: () => {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        },\n    }));\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    useEffect(() => {\n        if (value.length === numOfInput) {\n            setOtpValues(value);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFullValue = (incomingValue: string) => {\n        if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n            const incomingValueArr = incomingValue.split(\"\");\n            setOtpValues(incomingValueArr);\n            if (onChangeRef.current) {\n                onChangeRef.current(incomingValueArr);\n            }\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleChange =\n        (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const eventValue = event.target.value;\n\n            /* handle autofill */\n            const fieldIsEmpty = otpValues.every((num) => num === \"\");\n            const autofillOtp = stripOtpFromAutofill(\n                eventValue,\n                numOfInput,\n                prefix\n            );\n            if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n                return;\n            }\n\n            /* handle normal input */\n            const value = eventValue.replace(/[^0-9]/g, \"\");\n            if (validateUserInput(value)) {\n                const newOtpValues = [...otpValues];\n\n                newOtpValues[index] = value.substring(value.length - 1);\n                inputRefs.current[index + 1]?.focus();\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            }\n        };\n\n    const handleKeyDown =\n        (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const { key, code } = event;\n\n            if (key === \"Backspace\" || code === \"Backspace\") {\n                const newOtpValues = [...otpValues];\n                if (newOtpValues[index] !== \"\") {\n                    newOtpValues[index] = \"\";\n                } else if (index !== 0) {\n                    newOtpValues[index - 1] = \"\";\n                    inputRefs.current[index - 1]?.focus();\n                }\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            } else if (event.code === \"ArrowRight\") {\n                inputRefs.current[index + 1]?.focus();\n            } else if (event.code === \"ArrowLeft\") {\n                inputRefs.current[index - 1]?.focus();\n            }\n        };\n\n    const handlePaste = (event: ClipboardEvent): void => {\n        if (!event.clipboardData) return;\n\n        const pastedValue = event.clipboardData.getData(\"text\");\n        const autofillOtp = stripOtpFromAutofill(\n            pastedValue,\n            numOfInput,\n            prefix\n        );\n        if (!handleInputFullValue(autofillOtp)) {\n            event.preventDefault();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOtpValues(new Array(numOfInput).fill(\"\"));\n\n        if (!isWithinCooldown()) {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isWithinCooldown = (): boolean => {\n        const currentTime = Date.now();\n        const coolDownInMilliseconds = cooldownDuration * 1000;\n\n        return (\n            currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n        );\n    };\n\n    const beginCountdown = () => {\n        const interval = setInterval(() => {\n            const currentTime = Date.now();\n            const coolDownInMilliseconds = cooldownDuration * 1000;\n\n            const timer = Math.ceil(\n                (lastCtaTimestamp.valueOf() +\n                    coolDownInMilliseconds -\n                    currentTime) /\n                    1000\n            );\n            setCountDown(timer);\n            if (timer <= 0) {\n                if (onCooldownEnd) onCooldownEnd();\n                clearInterval(interval);\n            } else if (onCountdownChange) {\n                onCountdownChange(timer);\n            }\n        }, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    };\n\n    const generateId = (index: number, name: string, prefix?: string) => {\n        return prefix\n            ? `${prefix}-${name}-${index + 1}`\n            : `${name}-${index + 1}`;\n    };\n\n    const displaySeconds = (time: number) => {\n        return `${time} second${time === 1 ? \"\" : \"s\"}`;\n    };\n\n    const getCTALabelProps = (): Partial<\n        React.HTMLAttributes<HTMLButtonElement>\n    > => {\n        return otherCtaProps.children\n            ? { children: otherCtaProps.children }\n            : {\n                  children:\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(countDown)}`\n                          : \"Resend OTP\",\n                  // use a fixed label to avoid repeated screen reader updates when the button is focused\n                  \"aria-label\":\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n                          : \"Resend OTP\",\n                  // use a secondary element to reflect the latest countdown\n                  \"aria-describedby\": timerId,\n              };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Wrapper id={id} data-testid={dataTestId} className={className}>\n            <InputContainer\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Prefix\n                        forwardedAs=\"span\"\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Prefix>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <InputField\n                            id={generateId(index, \"otp-input\", id)}\n                            data-testid={generateId(\n                                index,\n                                \"otp-input\",\n                                dataTestId\n                            )}\n                            aria-label={`${StringHelper.formatOrdinal(\n                                index + 1\n                            )} digit`}\n                            aria-invalid={hasError}\n                            aria-describedby={hasError ? errorId : undefined}\n                            key={index}\n                            ref={(el) => (inputRefs.current[index] = el)}\n                            type=\"text\"\n                            inputMode=\"numeric\"\n                            value={data}\n                            error={hasError}\n                            onChange={handleChange(index)}\n                            onKeyDown={handleKeyDown(index)}\n                            autoComplete=\"off\"\n                            {...otherProps}\n                        />\n                    );\n                })}\n            </InputContainer>\n            {errorMessage && (\n                <FormErrorMessage id={errorId}>{errorMessage}</FormErrorMessage>\n            )}\n            {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button */}\n            <VisuallyHidden role=\"timer\" id={timerId}>\n                {displaySeconds(countDown)} remaining\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"polite\">\n                {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n            </VisuallyHidden>\n            {!otpOnly && (\n                <CTAButton\n                    styleType={styleType}\n                    type=\"button\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </Wrapper>\n    );\n};\n\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","SimpleIdGenerator","generate","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","Wrapper","children","InputContainer","role","Prefix","forwardedAs","weight","_jsx","VisuallyHidden","separator","map","data","InputField","Object","assign","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","CTAButton"],"mappings":"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"}
+{"version":3,"file":"otp-input.js","sources":["../../../src/otp-input/otp-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { StringHelper, useId } from \"../util\";\nimport {\n    CTAButton,\n    InputContainer,\n    InputField,\n    Prefix,\n    Wrapper,\n} from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n    {\n        id,\n        value = [],\n        \"data-testid\": dataTestId,\n        className,\n        cooldownDuration,\n        actionButtonProps,\n        errorMessage,\n        numOfInput,\n        prefix,\n        onChange,\n        onCooldownStart,\n        onCooldownEnd,\n        otpOnly,\n        onCountdownChange,\n        ...otherProps\n    }: OtpInputProps,\n    ref: React.Ref<OtpInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        disabled,\n        onClick,\n        styleType = \"secondary\",\n        ...otherCtaProps\n    } = actionButtonProps ?? {};\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    const onChangeRef = useRef(onChange);\n\n    const [otpValues, setOtpValues] = useState<string[]>(\n        new Array(numOfInput).fill(\"\")\n    );\n    const [countDown, setCountDown] = useState<number>(cooldownDuration);\n    const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n    const internalId = useId();\n\n    const hasError = !!errorMessage;\n    const errorId = `${internalId}-error`;\n    const timerId = `${internalId}-timer`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        inputRefs?.current[0]?.focus();\n        document.addEventListener(\"paste\", handlePaste);\n        return () => document.removeEventListener(\"paste\", handlePaste);\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n    }, [lastCtaTimestamp]);\n\n    useImperativeHandle(ref, () => ({\n        startCooldown: () => {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        },\n    }));\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    useEffect(() => {\n        if (value.length === numOfInput) {\n            setOtpValues(value);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFullValue = (incomingValue: string) => {\n        if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n            const incomingValueArr = incomingValue.split(\"\");\n            setOtpValues(incomingValueArr);\n            if (onChangeRef.current) {\n                onChangeRef.current(incomingValueArr);\n            }\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleChange =\n        (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const eventValue = event.target.value;\n\n            /* handle autofill */\n            const fieldIsEmpty = otpValues.every((num) => num === \"\");\n            const autofillOtp = stripOtpFromAutofill(\n                eventValue,\n                numOfInput,\n                prefix\n            );\n            if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n                return;\n            }\n\n            /* handle normal input */\n            const value = eventValue.replace(/[^0-9]/g, \"\");\n            if (validateUserInput(value)) {\n                const newOtpValues = [...otpValues];\n\n                newOtpValues[index] = value.substring(value.length - 1);\n                inputRefs.current[index + 1]?.focus();\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            }\n        };\n\n    const handleKeyDown =\n        (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const { key, code } = event;\n\n            if (key === \"Backspace\" || code === \"Backspace\") {\n                const newOtpValues = [...otpValues];\n                if (newOtpValues[index] !== \"\") {\n                    newOtpValues[index] = \"\";\n                } else if (index !== 0) {\n                    newOtpValues[index - 1] = \"\";\n                    inputRefs.current[index - 1]?.focus();\n                }\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            } else if (event.code === \"ArrowRight\") {\n                inputRefs.current[index + 1]?.focus();\n            } else if (event.code === \"ArrowLeft\") {\n                inputRefs.current[index - 1]?.focus();\n            }\n        };\n\n    const handlePaste = (event: ClipboardEvent): void => {\n        if (!event.clipboardData) return;\n\n        const pastedValue = event.clipboardData.getData(\"text\");\n        const autofillOtp = stripOtpFromAutofill(\n            pastedValue,\n            numOfInput,\n            prefix\n        );\n        if (!handleInputFullValue(autofillOtp)) {\n            event.preventDefault();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOtpValues(new Array(numOfInput).fill(\"\"));\n\n        if (!isWithinCooldown()) {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isWithinCooldown = (): boolean => {\n        const currentTime = Date.now();\n        const coolDownInMilliseconds = cooldownDuration * 1000;\n\n        return (\n            currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n        );\n    };\n\n    const beginCountdown = () => {\n        const interval = setInterval(() => {\n            const currentTime = Date.now();\n            const coolDownInMilliseconds = cooldownDuration * 1000;\n\n            const timer = Math.ceil(\n                (lastCtaTimestamp.valueOf() +\n                    coolDownInMilliseconds -\n                    currentTime) /\n                    1000\n            );\n            setCountDown(timer);\n            if (timer <= 0) {\n                if (onCooldownEnd) onCooldownEnd();\n                clearInterval(interval);\n            } else if (onCountdownChange) {\n                onCountdownChange(timer);\n            }\n        }, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    };\n\n    const generateId = (index: number, name: string, prefix?: string) => {\n        return prefix\n            ? `${prefix}-${name}-${index + 1}`\n            : `${name}-${index + 1}`;\n    };\n\n    const displaySeconds = (time: number) => {\n        return `${time} second${time === 1 ? \"\" : \"s\"}`;\n    };\n\n    const getCTALabelProps = (): Partial<\n        React.HTMLAttributes<HTMLButtonElement>\n    > => {\n        return otherCtaProps.children\n            ? { children: otherCtaProps.children }\n            : {\n                  children:\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(countDown)}`\n                          : \"Resend OTP\",\n                  // use a fixed label to avoid repeated screen reader updates when the button is focused\n                  \"aria-label\":\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n                          : \"Resend OTP\",\n                  // use a secondary element to reflect the latest countdown\n                  \"aria-describedby\": timerId,\n              };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Wrapper id={id} data-testid={dataTestId} className={className}>\n            <InputContainer\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Prefix\n                        forwardedAs=\"span\"\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Prefix>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <InputField\n                            id={generateId(index, \"otp-input\", id)}\n                            data-testid={generateId(\n                                index,\n                                \"otp-input\",\n                                dataTestId\n                            )}\n                            aria-label={`${StringHelper.formatOrdinal(\n                                index + 1\n                            )} digit`}\n                            aria-invalid={hasError}\n                            aria-describedby={hasError ? errorId : undefined}\n                            key={index}\n                            ref={(el) => (inputRefs.current[index] = el)}\n                            type=\"text\"\n                            inputMode=\"numeric\"\n                            value={data}\n                            error={hasError}\n                            onChange={handleChange(index)}\n                            onKeyDown={handleKeyDown(index)}\n                            autoComplete=\"off\"\n                            {...otherProps}\n                        />\n                    );\n                })}\n            </InputContainer>\n            {errorMessage && (\n                <FormErrorMessage id={errorId}>{errorMessage}</FormErrorMessage>\n            )}\n            {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button */}\n            <VisuallyHidden role=\"timer\" id={timerId}>\n                {displaySeconds(countDown)} remaining\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"polite\">\n                {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n            </VisuallyHidden>\n            {!otpOnly && (\n                <CTAButton\n                    styleType={styleType}\n                    type=\"button\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </Wrapper>\n    );\n};\n\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","useId","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","Wrapper","children","InputContainer","role","Prefix","forwardedAs","weight","_jsx","VisuallyHidden","separator","map","data","InputField","Object","assign","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","CTAButton"],"mappings":"kcAsBA,MA6TaA,EAAWC,EAAAA,YA7TN,CACdC,EAiBAC,KAjBA,IAAAC,GACIA,EAAEC,MACFA,EAAQ,GACR,cAAeC,EAAUC,UACzBA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,aACjBA,EAAYC,WACZA,EAAUC,OACVA,EAAMC,SACNA,EAAQC,gBACRA,EAAeC,cACfA,EAAaC,QACbA,EAAOC,kBACPA,GAAiBf,EACdgB,EAAUC,EAAAA,OAAAjB,EAfjB,iMAsBA,MAAMkB,EAKFX,QAAAA,EAAqB,CAAA,GALnBY,SACFA,EAAQC,QACRA,EAAOC,UACPA,EAAY,aAAWH,EACpBI,EAAaL,EAAAA,OAAAC,EAJd,CAAA,WAAA,UAAA,cAOAK,EAAYC,EAAAA,OAAoC,IAChDC,EAAcD,EAAAA,OAAOb,IAEpBe,EAAWC,GAAgBC,EAAAA,SAC9B,IAAIC,MAAMpB,GAAYqB,KAAK,MAExBC,EAAWC,GAAgBJ,EAAAA,SAAiBtB,IAC5C2B,EAAkBC,GAAuBN,EAAAA,SAAe,IAAIO,MAC7DC,EAAaC,EAAAA,QAEbC,IAAa9B,EACb+B,EAAU,GAAGH,UACbI,EAAU,GAAGJ,UAKnBK,EAAAA,WAAU,WAGN,OAFqB,QAArBzC,EAAAuB,aAAS,EAATA,EAAWmB,QAAQ,UAAE,IAAA1C,GAAAA,EAAE2C,QACvBC,SAASC,iBAAiB,QAASC,GAC5B,IAAMF,SAASG,oBAAoB,QAASD,EAAY,GAChE,IAEHL,EAAAA,WAAU,KACN,GAAyB,IAArBnC,EAAwB,CACpBM,GAAiBA,IACrB,MAAMoC,EAAUC,IAEhB,MAAO,IAAMD,GACjB,IACD,CAACf,IAEJiB,EAAAA,oBAAoBjD,GAAK,KAAA,CACrBkD,cAAe,KACXjB,EAAoB,IAAIC,MACxBH,EAAa1B,EAAiB,MAItCmC,EAAAA,WAAU,KACNhB,EAAYiB,QAAU/B,CAAQ,GAC/B,CAACA,IAEJ8B,EAAAA,WAAU,KACFtC,EAAMiD,SAAW3C,GACjBkB,EAAaxB,EACjB,GACD,CAACA,IAKJ,MAAMkD,EAAwBC,IAC1B,GAAIA,GAAiBC,EAAAA,kBAAkBD,EAAe7C,GAAa,CAC/D,MAAM+C,EAAmBF,EAAcG,MAAM,IAM7C,OALA9B,EAAa6B,GACT/B,EAAYiB,SACZjB,EAAYiB,QAAQc,IAGjB,CACX,CAEA,OAAO,CAAK,EAGVE,EACDC,GAAmBC,UAChB,MAAMC,EAAaD,EAAME,OAAO3D,MAG1B4D,EAAerC,EAAUsC,OAAOC,GAAgB,KAARA,IACxCC,EAAcC,EAAAA,qBAChBN,EACApD,EACAC,GAEJ,GAAIqD,GAAgBV,EAAqBa,GACrC,OAIJ,MAAM/D,EAAQ0D,EAAWO,QAAQ,UAAW,IAC5C,GAAIb,EAAAA,kBAAkBpD,GAAQ,CAC1B,MAAMkE,EAAe,IAAI3C,GAEzB2C,EAAaV,GAASxD,EAAMmE,UAAUnE,EAAMiD,OAAS,GACzB,QAA5BpD,EAAAuB,EAAUmB,QAAQiB,EAAQ,UAAE,IAAA3D,GAAAA,EAAE2C,QAE9BhB,EAAa0C,GAET1D,GACAA,EAAS0D,EAEjB,GAGFE,EACDZ,GAAmBC,cAChB,MAAMY,IAAEA,EAAGC,KAAEA,GAASb,EAEtB,GAAY,cAARY,GAAgC,cAATC,EAAsB,CAC7C,MAAMJ,EAAe,IAAI3C,GACG,KAAxB2C,EAAaV,GACbU,EAAaV,GAAS,GACL,IAAVA,IACPU,EAAaV,EAAQ,GAAK,GACE,QAA5B3D,EAAAuB,EAAUmB,QAAQiB,EAAQ,UAAE,IAAA3D,GAAAA,EAAE2C,SAGlChB,EAAa0C,GAET1D,GACAA,EAAS0D,EAEjB,KAA0B,eAAfT,EAAMa,KACe,QAA5BvD,EAAAK,EAAUmB,QAAQiB,EAAQ,UAAE,IAAAzC,GAAAA,EAAEyB,QACR,cAAfiB,EAAMa,OACe,QAA5BC,EAAAnD,EAAUmB,QAAQiB,EAAQ,UAAE,IAAAe,GAAAA,EAAE/B,QAClC,EAGFG,EAAec,IACjB,IAAKA,EAAMe,cAAe,OAE1B,MAAMC,EAAchB,EAAMe,cAAcE,QAAQ,QAC1CX,EAAcC,EAAAA,qBAChBS,EACAnE,EACAC,GAEC2C,EAAqBa,IACtBN,EAAMkB,gBACV,EAmBEC,EAAmB,KACrB,MAAMC,EAAc7C,KAAK8C,MACnBC,EAA4C,IAAnB5E,EAE/B,OACI0E,EAAc/C,EAAiBkD,UAAYD,CAAsB,EAInEjC,EAAiB,KACnB,MAAMmC,EAAWC,aAAY,KACzB,MAAML,EAAc7C,KAAK8C,MACnBC,EAA4C,IAAnB5E,EAEzBgF,EAAQC,KAAKC,MACdvD,EAAiBkD,UACdD,EACAF,GACA,KAERhD,EAAasD,GACTA,GAAS,GACLzE,GAAeA,IACnB4E,cAAcL,IACPrE,GACPA,EAAkBuE,EACtB,GACD,KAEH,MAAO,KACHG,cAAcL,EAAS,CAC1B,EAGCM,EAAa,CAAC/B,EAAegC,EAAcjF,IACtCA,EACD,GAAGA,KAAUiF,KAAQhC,EAAQ,IAC7B,GAAGgC,KAAQhC,EAAQ,IAGvBiC,EAAkBC,GACb,GAAGA,WAAuB,IAATA,EAAa,GAAK,MA0B9C,OACIC,OAACC,EAAAA,QAAO,CAAC7F,GAAIA,EAAE,cAAeE,EAAYC,UAAWA,EAAS2F,SAAA,CAC1DF,EAAAA,KAACG,EAAAA,eAAc,CACXC,KAAK,QAAO,aACA,GAAGzF,0BAAkCuF,SAAA,CAEhDtF,GACGoF,EAAAA,KAACK,EAAAA,QACGC,YAAY,OAAM,cACN,aACZC,OAAO,WAAUL,SAAA,CAEjBM,EAAAA,IAACC,iBAAc,CAAAP,SAAA,iBACd,GAAGtF,EAAOP,SAASO,EAAO8F,eAGlC9E,EAAU+E,KAAI,CAACC,EAAM/C,IAEd2C,EAAAA,IAACK,EAAAA,WAAUC,OAAAC,OAAA,CACP3G,GAAIwF,EAAW/B,EAAO,YAAazD,GAAG,cACzBwF,EACT/B,EACA,YACAvD,GACH,aACW,GAAG0G,EAAAA,aAAaC,cACxBpD,EAAQ,WACH,eACKrB,EAAQ,mBACJA,EAAWC,OAAUyE,EAEvC/G,IAAMgH,GAAQ1F,EAAUmB,QAAQiB,GAASsD,EACzCC,KAAK,OACLC,UAAU,UACVhH,MAAOuG,EACPU,MAAO9E,EACP3B,SAAU+C,EAAaC,GACvB0D,UAAW9C,EAAcZ,GACzB2D,aAAa,OACTtG,GATC2C,QAcpBnD,GACG8F,EAAAA,IAACiB,EAAAA,iBAAgB,CAACrH,GAAIqC,EAAOyD,SAAGxF,IAGpCsF,EAAAA,KAACS,EAAAA,eAAc,CAACL,KAAK,QAAQhG,GAAIsC,EAAOwD,SAAA,CACnCJ,EAAe7D,GAAU,gBAE9BuE,EAAAA,IAACC,EAAAA,eAAc,CAAA,YAAW,SAAQP,SAC7BjE,EAAY,EAAI,GAAK,yBAExBjB,GACEwF,EAAAA,IAACkB,EAAAA,UAASZ,OAAAC,OAAA,CACNxF,UAAWA,EACX6F,KAAK,UACD5F,EAAa,CACjBF,QA9IKwC,IACjBjC,EAAa,IAAIE,MAAMpB,GAAYqB,KAAK,KAEnCiD,MACD7C,EAAoB,IAAIC,MACxBH,EAAa1B,IAGbc,GACAA,EAAQwC,EACZ,EAqIYzC,SAAUA,GAAY4D,KAhF3BzD,EAAc0E,SACf,CAAEA,SAAU1E,EAAc0E,UAC1B,CACIA,SACIjE,EAAY,EACN,iBAAiB6D,EAAe7D,KAChC,aAEV,aACIA,EAAY,EACN,iBAAiB6D,EAAetF,KAChC,aAEV,mBAAoBkC,OAuEpB"}

package/cjs/otp-verification/contact-input-section.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),i=require("../form/form-label.js"),n=require("./contact-input-section-styles.js");exports.ContactInputSection=({id:r,"data-testid":a,disabled:o,readOnly:d,inputId:l,type:c,sendOtpPlaceholder:s,emailValue:u,onEmailChange:p,phoneNumberValue:h,onPhoneNumberChange:m,fixedCountry:b,isLoading:C,isVerified:x,countdown:g,onSendOtp:j,onStateReset:v,sendOtpError:y})=>{const $=e=>{v(),"email"===c&&p&&p(e.target.value)},f=e=>{v(),"phone-number"===c&&m&&m(e)};return e.jsxs(n.ContactSectionWrapper,{id:r,"data-testid":a,children:[e.jsxs(n.ContactInputSectionWrapper,{children:[e.jsxs(n.ContactInputWrapper,{$isMaxWidth:"email"===c,$error:!!y,$disabled:o,$readonly:d,children:["email"===c?e.jsx(n.EmailContactInput,{id:l,"data-testid":a?`${a}-contact-input`:void 0,placeholder:s||"Enter email",value:u,onChange:$,type:"email",noBorder:!0,"aria-invalid":!!y,"aria-required":!0,disabled:o,readOnly:d}):e.jsx(n.PhoneContactInput,{id:l,"data-testid":a?`${a}-contact-input`:void 0,placeholder:s||"Enter mobile number",value:h,onChange:f,noBorder:!0,fixedCountry:b,"aria-invalid":!!y,"aria-required":!0,disabled:o,readOnly:d}),x&&e.jsx(n.VerifiedIconWrapper,{"aria-label":"Verified",role:"img",children:e.jsx(t.TickCircleFillIcon,{})})]}),!o&&!d&&e.jsx(n.ContactButton,{id:r?`${r}-contact-button`:void 0,type:"button","data-testid":a?`${a}-contact-button`:void 0,onClick:j,disabled:g.isRunning||x,loading:C,children:x?"Verified":C?"":g.isRunning?"Sent OTP":"Send OTP"})]}),y&&e.jsx(i.FormErrorMessage,{id:r?`${r}-contact-error`:void 0,"data-testid":a?`${a}-contact-error`:void 0,role:"alert",children:y})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),r=require("../form/form-label.js"),t=require("./contact-input-section-styles.js");exports.ContactInputSection=({id:a,"data-testid":n,disabled:o,readOnly:d,inputId:l,type:c,sendOtpPlaceholder:s,emailValue:u,onEmailChange:p,phoneNumberValue:b,onPhoneNumberChange:m,fixedCountry:v,isLoading:h,isVerified:C,countdown:g,onSendOtp:x,onStateReset:y,sendOtpError:j})=>{const f=a?`${a}-contact-error`:void 0,$=e=>{y(),"email"===c&&p&&p(e.target.value)},O=e=>{y(),"phone-number"===c&&m&&m(e)},E=e=>{var i;return`Enter your ${null!==(i=null==e?void 0:e.name)&&void 0!==i?i:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs(t.ContactSectionWrapper,{id:a,"data-testid":n,children:[e.jsxs(t.ContactInputSectionWrapper,{children:[e.jsxs(t.ContactInputWrapper,{$isMaxWidth:"email"===c,$error:!!j,$disabled:o,$readonly:d,children:["email"===c?e.jsx(t.EmailContactInput,{id:l,"data-testid":n?`${n}-contact-input`:void 0,placeholder:s||"Enter email",value:u,onChange:$,type:"email",noBorder:!0,"aria-invalid":!!j,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-describedby":j?f:void 0,disabled:o,readOnly:d}):e.jsx(t.PhoneContactInput,{id:l,"data-testid":n?`${n}-contact-input`:void 0,placeholder:s||"Enter mobile number",value:b,onChange:O,noBorder:!0,fixedCountry:v,"aria-invalid":!!j,"aria-required":!0,"aria-describedby":j?f:void 0,getAriaLabel:E,disabled:o,readOnly:d}),C&&e.jsx(t.VerifiedIconWrapper,{"aria-label":"Verified",role:"img",children:e.jsx(i.TickCircleFillIcon,{})})]}),!o&&!d&&e.jsx(t.ContactButton,{id:a?`${a}-contact-button`:void 0,type:"button","data-testid":n?`${n}-contact-button`:void 0,onClick:x,disabled:g.isRunning||C,loading:h,children:C?"Verified":h?"":g.isRunning?"Sent OTP":"Send OTP"})]}),j&&e.jsx(r.FormErrorMessage,{id:f,"data-testid":n?`${n}-contact-error`:void 0,role:"alert",children:j})]})};
 //# sourceMappingURL=contact-input-section.js.map

package/cjs/otp-verification/contact-input-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type { PhoneNumberInputValue } from \"../phone-number-input\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n}: ContactInputSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={id ? `${id}-contact-error` : undefined}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","handleEmailInputChange","e","target","value","handlePhoneInputChange","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","undefined","placeholder","onChange","noBorder","PhoneContactInput","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"+LAemC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,mBAKA,MAAMC,EAA0BC,IAC5BH,IACa,UAATX,GAAoBG,GACpBA,EAAcW,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BL,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBW,EACxB,EA+DJ,OACIE,EAAAA,KAACC,EAAAA,sBAAqB,CAACxB,GAAIA,EAAE,cAAeC,EAAUwB,SAAA,CAClDF,EAAAA,KAACG,EAAAA,2BAA0B,CAAAD,SAAA,CACvBF,EAAAA,KAACI,mCACyB,UAATtB,EAAgBuB,SACnBX,EAAYY,UACX3B,YACAC,EAAQsB,SAAA,CA5CtB,UAATpB,EACIyB,EAAAA,IAACC,EAAAA,kBAAiB,CACd/B,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6B+B,EAEjDC,YAAa3B,GAAsB,cACnCe,MAAOd,EACP2B,SAAUhB,EACVb,KAAK,QACL8B,UAAQ,EAAA,iBACQlB,EAAY,iBACb,EACff,SAAUA,EACVC,SAAUA,IAGd2B,EAAAA,IAACM,EAAAA,kBAAiB,CACdpC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6B+B,EAEjDC,YAAa3B,GAAsB,sBACnCe,MAAOZ,EACPyB,SAAUZ,EACVa,UAAQ,EACRxB,aAAcA,EAAY,iBACVM,EAAY,iBACb,EACff,SAAUA,EACVC,SAAUA,IAiBLU,GACGiB,EAAAA,IAACO,EAAAA,kCAA+B,WAAWC,KAAK,MAAKb,SACjDK,EAAAA,IAACS,EAAAA,mBAAkB,CAAA,SAI7BrC,IAAaC,GACX2B,EAAAA,IAACU,EAAAA,cAAa,CACVxC,GAAIA,EAAK,GAAGA,wBAAsBgC,EAClC3B,KAAK,uBAEDJ,EACM,GAAGA,wBACH+B,EAEVS,QAAS1B,EACTb,SAAUY,EAAU4B,WAAa7B,EACjC8B,QAAS/B,EAASa,SAnF9BZ,EACO,WAGPD,EACO,GAGPE,EAAU4B,UACH,WAGJ,gBA6EFzB,GACGa,EAAAA,IAACc,EAAAA,kBACG5C,GAAIA,EAAK,GAAGA,uBAAqBgC,EAAS,cAEtC/B,EAAa,GAAGA,uBAA6B+B,EAEjDM,KAAK,QAAOb,SAEXR,MAGW"}
+{"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type {\n    CountryValue,\n    PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n}: ContactInputSectionProps) => {\n    const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    const getMobileAriaLabel = (country?: CountryValue) =>\n        `Enter your ${\n            country?.name ?? \"\"\n        } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-label=\"Enter your email address to receive a verification OTP\"\n                aria-describedby={sendOtpError ? contactErrorId : undefined}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-describedby={sendOtpError ? contactErrorId : undefined}\n                getAriaLabel={getMobileAriaLabel}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={contactErrorId}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","noBorder","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"+LAkBmC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,mBAEA,MAAMC,EAAiBlB,EAAK,GAAGA,uBAAqBmB,EAK9CC,EAA0BC,IAC5BL,IACa,UAATX,GAAoBG,GACpBA,EAAca,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BP,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBa,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EA+CvE,OACIC,EAAAA,KAACC,EAAAA,sBAAqB,CAAC/B,GAAIA,EAAE,cAAeC,EAAU+B,SAAA,CAClDF,EAAAA,KAACG,EAAAA,2BAA0B,CAAAD,SAAA,CACvBF,EAAAA,KAACI,mCACyB,UAAT7B,EAAgB8B,SACnBlB,EAAYmB,UACXlC,YACAC,EAAQ6B,SAAA,CAhDtB,UAAT3B,EACIgC,EAAAA,IAACC,qBACGtC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BkB,EAEjDoB,YAAajC,GAAsB,cACnCiB,MAAOhB,EACPiC,SAAUpB,EACVf,KAAK,QACLoC,UAAQ,EAAA,iBACQxB,EAAY,iBACb,EAAI,aACR,yDAAwD,mBACjDA,EAAeC,OAAiBC,EAClDjB,SAAUA,EACVC,SAAUA,IAGdkC,EAAAA,IAACK,oBAAiB,CACd1C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BkB,EAEjDoB,YAAajC,GAAsB,sBACnCiB,MAAOd,EACP+B,SAAUhB,EACViB,UAAQ,EACR9B,aAAcA,EAAY,iBACVM,mBACD,EAAI,mBACDA,EAAeC,OAAiBC,EAClDwB,aAAclB,EACdvB,SAAUA,EACVC,SAAUA,IAiBLU,GACGwB,EAAAA,IAACO,EAAAA,kCAA+B,WAAWC,KAAK,MAAKb,SACjDK,EAAAA,IAACS,EAAAA,mBAAkB,CAAA,SAI7B5C,IAAaC,GACXkC,EAAAA,IAACU,EAAAA,cAAa,CACV/C,GAAIA,EAAK,GAAGA,wBAAsBmB,EAClCd,KAAK,uBAEDJ,EACM,GAAGA,wBACHkB,EAEV6B,QAASjC,EACTb,SAAUY,EAAUmC,WAAapC,EACjCqC,QAAStC,EAASoB,SA5F9BnB,EACO,WAGPD,EACO,GAGPE,EAAUmC,UACH,WAGJ,gBAsFFhC,GACGoB,EAAAA,IAACc,EAAAA,iBAAgB,CACbnD,GAAIkB,EAAc,cAEdjB,EAAa,GAAGA,uBAA6BkB,EAEjD0B,KAAK,QAAOb,SAEXf,MAGW"}

package/cjs/otp-verification/otp-verification.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");var r=require("../util/use-countdown.js"),n=require("./contact-input-section.js"),o=require("./otp-verification-styles.js"),a=require("./verification-section.js");exports.OtpVerification=s=>{const{id:d,"data-testid":u,className:l,inputId:p,onSendOtp:c,onVerifyOtp:v,verifyOtpCountdownTimer:f=60,sendOtpError:y,verifyOtpError:j,otpValue:O,onOtpChange:q,otpState:x,onOtpStateChange:S}=s,[C,h]=i.useState(!1),[g,w]=i.useState(!1),V=r.useCountdown({duration:f});return t.jsxs(o.OTPInputWrapper,{id:d,"data-testid":u,className:l,children:[t.jsx(n.ContactInputSection,Object.assign({},s,{inputId:p,"data-testid":u?`${u}-contact`:void 0,isLoading:C,isVerified:"verified"===x,countdown:V,onSendOtp:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(c)try{h(!0),yield c(),S("sent"),V.reset(),V.start()}catch(e){}finally{h(!1)}})),onStateReset:()=>{"verified"===x&&S("default")},sendOtpError:y,fixedCountry:"phone-number"!==s.type||s.fixedCountry})),"sent"===x&&t.jsx(a.VerificationSection,Object.assign({},s,{"data-testid":u?`${u}-verification`:void 0,otpCode:null==O?void 0:O.value,otpPrefix:null==O?void 0:O.prefix,otpSeparator:null==O?void 0:O.separator,setOtpCode:q,isVerifyLoading:g,countdown:V,onVerifyOtp:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(v&&(null==O?void 0:O.value))try{w(!0),yield v(O.value),S("verified"),V.reset(),null==q||q("")}catch(e){}finally{w(!1)}})),verifyOtpError:j}))]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@react-aria/live-announcer"),r=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var n=require("../util/use-countdown.js"),o=require("./contact-input-section.js"),a=require("./otp-verification-styles.js"),s=require("./verification-section.js");exports.OtpVerification=d=>{const{id:u,"data-testid":l,className:c,inputId:p,onSendOtp:v,onVerifyOtp:f,verifyOtpCountdownTimer:y=60,sendOtpError:O,verifyOtpError:j,otpValue:g,onOtpChange:m,otpState:q,onOtpStateChange:S,otpReminderInterval:h=120}=d,[x,C]=r.useState(!1),[w,b]=r.useState(!1),I=n.useCountdown({duration:y,reminderInterval:h,getStartMessage:e=>`You can resend the OTP in ${e} seconds`,getIntervalMessage:e=>`${e} seconds remaining`,getCompletionMessage:()=>"You can now resend the OTP"});return t.jsxs(a.OTPInputWrapper,{id:u,"data-testid":l,className:c,children:[t.jsx(o.ContactInputSection,Object.assign({},d,{inputId:p,"data-testid":l?`${l}-contact`:void 0,isLoading:x,isVerified:"verified"===q,countdown:I,onSendOtp:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(v)try{C(!0),yield v(),S("sent"),I.reset(),I.start()}catch(e){}finally{C(!1)}})),onStateReset:()=>{"verified"===q&&S("default")},sendOtpError:O,fixedCountry:"phone-number"!==d.type||d.fixedCountry})),"sent"===q&&t.jsx(s.VerificationSection,Object.assign({},d,{"data-testid":l?`${l}-verification`:void 0,otpCode:null==g?void 0:g.value,otpPrefix:null==g?void 0:g.prefix,otpSeparator:null==g?void 0:g.separator,setOtpCode:m,isVerifyLoading:w,countdown:I,onVerifyOtp:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(f&&(null==g?void 0:g.value))try{b(!0),yield f(g.value),S("verified"),i.clearAnnouncer("polite"),i.announce("Success. Your email or mobile number has been verified.","polite"),I.reset(),null==m||m("")}catch(e){}finally{b(!1)}})),verifyOtpError:j}))]})};
 //# sourceMappingURL=otp-verification.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport { OTPInputWrapper } from \"./otp-verification-styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n    } = props;\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n    const countdown = useCountdown({\n        duration: verifyOtpCountdownTimer,\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Send OTP\n    const handleSendOtp = async () => {\n        if (!onSendOtp) return;\n\n        try {\n            setIsLoading(true);\n            await onSendOtp();\n            onOtpStateChange(\"sent\");\n            countdown.reset();\n            countdown.start();\n        } catch {\n            // do nothing\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // Verify OTP\n    const handleVerifyOtp = async () => {\n        if (!onVerifyOtp || !otpValue?.value) return;\n\n        try {\n            setIsVerifyLoading(true);\n            await onVerifyOtp(otpValue.value);\n            onOtpStateChange(\"verified\");\n            // Reset the countdown and clear the OTP code in case user enter new OTP later\n            countdown.reset();\n            onOtpChange?.(\"\");\n        } catch {\n            // do nothing\n        } finally {\n            setIsVerifyLoading(false);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const resetToDefault = () => {\n        if (otpState === \"verified\") {\n            onOtpStateChange(\"default\");\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <OTPInputWrapper id={id} data-testid={dataTestId} className={className}>\n            <ContactInputSection\n                {...props}\n                inputId={inputId}\n                data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n                isLoading={isLoading}\n                isVerified={otpState === \"verified\"}\n                countdown={countdown}\n                onSendOtp={handleSendOtp}\n                onStateReset={resetToDefault}\n                sendOtpError={sendOtpError}\n                fixedCountry={\n                    props.type === \"phone-number\" ? props.fixedCountry : true\n                }\n            />\n\n            {otpState === \"sent\" && (\n                <VerificationSection\n                    {...props}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-verification` : undefined\n                    }\n                    otpCode={otpValue?.value}\n                    otpPrefix={otpValue?.prefix}\n                    otpSeparator={otpValue?.separator}\n                    setOtpCode={onOtpChange}\n                    isVerifyLoading={isVerifyLoading}\n                    countdown={countdown}\n                    onVerifyOtp={handleVerifyOtp}\n                    verifyOtpError={verifyOtpError}\n                />\n            )}\n        </OTPInputWrapper>\n    );\n};\n"],"names":["props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","_jsxs","OTPInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode"],"mappings":"qZAQgCA,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,GACAb,GAEGc,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUd,IAqDd,OACIe,OAACC,EAAAA,gBAAe,CAACtB,GAAIA,EAAE,cAAeC,EAAYC,UAAWA,EAASqB,SAAA,CAClEC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,GACZ5B,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuB2B,EACpDf,UAAWA,EACXgB,WAAyB,aAAblB,EACZO,UAAWA,EACXd,UAvDU,IAAW0B,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,GAAK1B,EAEL,IACIU,GAAa,SACPV,IACNQ,EAAiB,QACjBM,EAAUa,QACVb,EAAUc,OACd,CAAE,MAAAC,GAEF,SACInB,GAAa,EACjB,CACJ,IA0CYoB,aAnBW,KACF,aAAbvB,GACAC,EAAiB,UACrB,EAiBQL,aAAcA,EACd4B,aACmB,iBAAfpC,EAAMqC,MAA0BrC,EAAMoC,gBAIhC,SAAbxB,GACGa,MAACa,EAAAA,oBAAmBX,OAAAC,OAAA,CAAA,EACZ5B,iBAEAE,EAAa,GAAGA,sBAA4B2B,EAEhDU,QAAS7B,aAAQ,EAARA,EAAU8B,MACnBC,UAAW/B,aAAQ,EAARA,EAAUgC,OACrBC,aAAcjC,aAAQ,EAARA,EAAUkC,UACxBC,WAAYlC,EACZM,gBAAiBA,EACjBE,UAAWA,EACXb,YA1DQ,IAAWyB,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAKzB,IAAgBI,aAAQ,EAARA,EAAU8B,OAE/B,IACItB,GAAmB,SACbZ,EAAYI,EAAS8B,OAC3B3B,EAAiB,YAEjBM,EAAUa,QACVrB,SAAAA,EAAc,GAClB,CAAE,MAAAuB,GAEF,SACIhB,GAAmB,EACvB,CACJ,IA4CgBT,eAAgBA,OAGV"}
+{"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport { OTPInputWrapper } from \"./otp-verification-styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n        otpReminderInterval = 120,\n    } = props;\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n    const countdown = useCountdown({\n        duration: verifyOtpCountdownTimer,\n        reminderInterval: otpReminderInterval,\n        getStartMessage: (duration) =>\n            `You can resend the OTP in ${duration} seconds`,\n        getIntervalMessage: (remaining) => `${remaining} seconds remaining`,\n        getCompletionMessage: () => \"You can now resend the OTP\",\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Send OTP\n    const handleSendOtp = async () => {\n        if (!onSendOtp) return;\n\n        try {\n            setIsLoading(true);\n            await onSendOtp();\n            onOtpStateChange(\"sent\");\n            countdown.reset();\n            countdown.start();\n        } catch {\n            // do nothing\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // Verify OTP\n    const handleVerifyOtp = async () => {\n        if (!onVerifyOtp || !otpValue?.value) return;\n\n        try {\n            setIsVerifyLoading(true);\n            await onVerifyOtp(otpValue.value);\n\n            onOtpStateChange(\"verified\");\n\n            clearAnnouncer(\"polite\");\n            announce(\n                \"Success. Your email or mobile number has been verified.\",\n                \"polite\"\n            );\n\n            // Reset the countdown and clear the OTP code in case user enter new OTP later\n            countdown.reset();\n            onOtpChange?.(\"\");\n        } catch {\n            // do nothing\n        } finally {\n            setIsVerifyLoading(false);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const resetToDefault = () => {\n        if (otpState === \"verified\") {\n            onOtpStateChange(\"default\");\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <OTPInputWrapper id={id} data-testid={dataTestId} className={className}>\n            <ContactInputSection\n                {...props}\n                inputId={inputId}\n                data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n                isLoading={isLoading}\n                isVerified={otpState === \"verified\"}\n                countdown={countdown}\n                onSendOtp={handleSendOtp}\n                onStateReset={resetToDefault}\n                sendOtpError={sendOtpError}\n                fixedCountry={\n                    props.type === \"phone-number\" ? props.fixedCountry : true\n                }\n            />\n\n            {otpState === \"sent\" && (\n                <VerificationSection\n                    {...props}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-verification` : undefined\n                    }\n                    otpCode={otpValue?.value}\n                    otpPrefix={otpValue?.prefix}\n                    otpSeparator={otpValue?.separator}\n                    setOtpCode={onOtpChange}\n                    isVerifyLoading={isVerifyLoading}\n                    countdown={countdown}\n                    onVerifyOtp={handleVerifyOtp}\n                    verifyOtpError={verifyOtpError}\n                />\n            )}\n        </OTPInputWrapper>\n    );\n};\n"],"names":["props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","OTPInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"ueASgCA,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,OAACC,EAAAA,gBAAe,CAAC5B,GAAIA,EAAE,cAAeC,EAAYC,UAAWA,EAAS2B,SAAA,CAClEC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,GACZlC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBiC,EACpDpB,UAAWA,EACXqB,WAAyB,aAAbxB,EACZQ,UAAWA,EACXf,UA/DU,IAAWgC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,GAAKhC,EAEL,IACIW,GAAa,SACPX,IACNQ,EAAiB,QACjBO,EAAUkB,QACVlB,EAAUmB,OACd,CAAE,MAAAC,GAEF,SACIxB,GAAa,EACjB,CACJ,IAkDYyB,aAnBW,KACF,aAAb7B,GACAC,EAAiB,UACrB,EAiBQL,aAAcA,EACdkC,aACmB,iBAAf1C,EAAM2C,MAA0B3C,EAAM0C,gBAIhC,SAAb9B,GACGmB,MAACa,EAAAA,oBAAmBX,OAAAC,OAAA,CAAA,EACZlC,iBAEAE,EAAa,GAAGA,sBAA4BiC,EAEhDU,QAASnC,aAAQ,EAARA,EAAUoC,MACnBC,UAAWrC,aAAQ,EAARA,EAAUsC,OACrBC,aAAcvC,aAAQ,EAARA,EAAUwC,UACxBC,WAAYxC,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,YAlEQ,IAAW+B,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAK/B,IAAgBI,aAAQ,EAARA,EAAUoC,OAE/B,IACI3B,GAAmB,SACbb,EAAYI,EAASoC,OAE3BjC,EAAiB,YAEjBuC,EAAAA,eAAe,UACfC,EAAAA,SACI,0DACA,UAIJjC,EAAUkB,QACV3B,SAAAA,EAAc,GAClB,CAAE,MAAA6B,GAEF,SACIrB,GAAmB,EACvB,CACJ,IA4CgBV,eAAgBA,OAGV"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("../external/react-responsive/dist/react-responsive.js"),t=require("styled-components"),a=require("../form/form-label.js"),n=require("../input-group/input-group.js"),o=require("../typography/index.js"),d=require("../v3_theme/index.js"),s=require("./thumbnail/email-thumbnail.js"),l=require("./thumbnail/phone-thumbnail.js"),u=require("./verification-section-styles.js");exports.VerificationSection=({id:p,"data-testid":h,type:v,showVerifyOtpThumbnail:c=!1,verifyOtpTitle:y,verifyOtpMessage:m,otpCode:f,setOtpCode:x,isVerifyLoading:g,countdown:j,onVerifyOtp:b,verifyOtpError:$,otpPrefix:q,otpSeparator:T})=>{const O=i.useContext(t.ThemeContext),V=r.reactResponsiveExports.useMediaQuery({maxWidth:d.V3_Breakpoint["sm-max"]({theme:O})})?64:120;return e.jsxs(u.VerificationSectionWrapper,{id:p,"data-testid":h,role:"group","aria-labelledby":p?`${p}-title`:void 0,children:[(()=>{if(!c)return null;const i="email"===v?"Email verification":"Phone verification";return e.jsx("div",{"aria-label":i,role:"img",children:"email"===v?e.jsx(s.EmailThumbnail,{width:V,height:V}):e.jsx(l.PhoneThumbnail,{width:V,height:V})})})(),e.jsxs(u.SectionContainer,{children:[e.jsxs("div",{children:[e.jsx(o.Typography.BodyMD,{weight:"semibold",id:p?`${p}-title`:void 0,"data-testid":h?`${h}-title`:void 0,children:y}),e.jsx(o.Typography.BodyMD,{weight:"regular",id:p?`${p}-message`:void 0,"data-testid":h?`${h}-message`:void 0,children:m})]}),e.jsxs("div",{children:[e.jsxs(u.VerifyInputWrapper,{children:[e.jsx(n.InputGroup,{id:p?`${p}-verify-input`:void 0,"data-testid":h?`${h}-verify-input`:void 0,value:f,onChange:e=>null==x?void 0:x(e.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=q?q:""}${null!=T?T:""}`}},type:"number",error:!!$,"aria-label":"Enter OTP code","aria-invalid":!!$,"aria-required":!0}),e.jsx(u.VerifyButton,{id:p?`${p}-verify-button`:void 0,type:"button","data-testid":h?`${h}-verify-button`:void 0,onClick:b,loading:g,styleType:"light",disabled:!f||0===f.length,children:!g&&"Verify"})]}),$&&e.jsx(a.FormErrorMessage,{id:p?`${p}-verify-error`:void 0,"data-testid":h?`${h}-verify-error`:void 0,role:"alert",children:$})]}),j.isRunning&&e.jsxs(u.ReSendMessage,{id:p?`${p}-countdown`:void 0,"data-testid":h?`${h}-countdown`:void 0,children:["Resend OTP in ",j.formatTime()]})]})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("../external/react-responsive/dist/react-responsive.js"),t=require("styled-components"),a=require("../form/form-label.js"),n=require("../input-group/input-group.js"),d=require("../shared/accessibility/index.js"),s=require("../typography/index.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");var l=require("../v3_theme/index.js"),u=require("./thumbnail/email-thumbnail.js"),p=require("./thumbnail/phone-thumbnail.js"),h=require("./verification-section-styles.js");exports.VerificationSection=({id:c,"data-testid":y,type:v,showVerifyOtpThumbnail:j=!1,verifyOtpTitle:m,verifyOtpMessage:x,otpCode:g,setOtpCode:f,isVerifyLoading:b,countdown:q,onVerifyOtp:$,verifyOtpError:T,otpPrefix:V,otpSeparator:w})=>{const O=i.useContext(t.ThemeContext),C=r.reactResponsiveExports.useMediaQuery({maxWidth:l.V3_Breakpoint["sm-max"]({theme:O})})?64:120,M=o.useId(),E=`${M}-title`,S=`${M}-message`,B=`${M}-verify-input-addon`,I=`${M}-verify-error`;return e.jsxs(h.VerificationSectionWrapper,{id:c,"data-testid":y,role:"group",children:[j?e.jsx("div",{"aria-hidden":!0,children:"email"===v?e.jsx(u.EmailThumbnail,{width:C,height:C}):e.jsx(p.PhoneThumbnail,{width:C,height:C})}):null,e.jsxs(h.SectionContainer,{children:[e.jsxs("div",{children:[e.jsx(s.Typography.BodyMD,{weight:"semibold",id:E,"data-testid":y?`${y}-title`:void 0,children:m}),e.jsx(s.Typography.BodyMD,{weight:"regular",id:S,"data-testid":y?`${y}-message`:void 0,children:x})]}),e.jsxs("div",{children:[e.jsxs(h.VerifyInputWrapper,{children:[e.jsx(n.InputGroup,{id:c?`${c}-verify-input`:void 0,"data-testid":y?`${y}-verify-input`:void 0,value:g,onChange:e=>null==f?void 0:f(e.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=V?V:""}${null!=w?w:""}`}},type:"number",error:!!T,"aria-labelledby":E,"aria-describedby":d.concatIds(S,B,T?I:void 0),"aria-invalid":!!T,"aria-required":!0}),e.jsx(h.VerifyButton,{id:c?`${c}-verify-button`:void 0,type:"button","data-testid":y?`${y}-verify-button`:void 0,onClick:$,loading:b,styleType:"light",disabled:!g||0===g.length,children:!b&&"Verify"})]}),T&&e.jsx(a.FormErrorMessage,{id:I,"data-testid":y?`${y}-verify-error`:void 0,role:"alert",children:T})]}),q.isRunning&&e.jsxs(h.ReSendMessage,{id:c?`${c}-countdown`:void 0,"data-testid":y?`${y}-countdown`:void 0,children:["Resend OTP in ",q.formatTime()]})]})]})};
 //# sourceMappingURL=verification-section.js.map