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

package/notification-banner/notification-banner.styles.js

@@ -1,112 +1,2 @@
-import e,{css as i}from"styled-components";import{Layout as r}from"../layout/index.js";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{Typography as t}from"../typography/index.js";import{V3_Colour as n,V3_Motion as a,V3_Radius as l,V3_Spacing as s,V3_Font as d}from"../v3_theme/index.js";const p=i`
-    color: ${n["hyperlink-inverse"]};
-
-    svg {
-        color: ${n["icon-primary-inverse"]};
-    }
-
-    &:hover,
-    &:active,
-    &:visited,
-    &:focus {
-        color: ${n["hyperlink-inverse"]};
-        svg {
-            color: ${n["icon-primary-inverse"]};
-        }
-    }
-`,c=e.div`
-    position: ${e=>e.$sticky?"sticky":"relative"};
-    left: 0;
-    top: 0;
-    width: 100%;
-    transition: all ${a["duration-800"]} ${a["ease-default"]};
-    background: ${n["bg-inverse-subtle"]};
-    border-radius: ${l.none};
-    z-index: 25;
-    cursor: ${e=>e.$clickable?"pointer":"default"};
-`,g=e(r.Content)``,m=e.div`
-    flex: 1;
-    align-items: flex-start;
-    padding: ${s["spacing-24"]} 0;
-`,$=e.div`
-    display: flex;
-    flex: 1;
-    align-items: flex-start;
-
-    ${d["body-baseline-regular"]}
-    color: ${n["text-inverse"]};
-
-    p {
-        display: inline-block;
-    }
-
-    strong {
-        ${d["body-baseline-semibold"]}
-        color: ${n["text-inverse"]};
-    }
-
-    a {
-        ${d["body-baseline-regular"]}
-        ${p}
-    }
-`,h=e.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-`,v=e.div`
-    flex: 1;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    ${e=>{const r="linear-gradient(to bottom, black 50%, transparent 100%)";if(e.$maxCollapsedHeight)return i`
-                max-height: ${e.$maxCollapsedHeight}px;
-                overflow: hidden;
-                -webkit-mask-image: ${r};
-                mask-image: ${r};
-            `}}
-`,b=e(t.LinkBL)`
-    position: relative;
-
-    ${p}
-`,f=e(o)`
-    margin-right: -${s["spacing-24"]};
-    padding-left: ${s["spacing-16"]};
-    height: max-content;
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-        color: ${n["icon-inverse"]};
-    }
-`,x=e.button`
-    display: flex;
-    align-items: center;
-    gap: ${s["spacing-4"]};
-    align-self: flex-start;
-    margin-top: ${s["spacing-8"]};
-
-    border: none;
-    background: transparent;
-    color: ${n["hyperlink-inverse"]};
-    ${d["body-md-semibold"]};
-
-    cursor: pointer;
-`,k=e.button`
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-`,y=e.div`
-    height: 1.5rem;
-    width: 1.5rem;
-    margin: ${s["spacing-24"]} ${s["spacing-24"]} 0 0;
-    flex-shrink: 0;
-
-    svg {
-        height: 100%;
-        width: 100%;
-        color: ${n["hyperlink-inverse"]};
-    }
-`;export{k as AccessibleBannerButton,x as ActionButton,g as Container,$ as Content,m as ContentContainer,b as ContentLink,v as ContentText,h as ContentWrapper,y as IconContainer,f as StyledIconButton,c as Wrapper};
+import"./notification-banner.styles_uxlysy.css";const t={contentText:{maxCollapsedHeight:"--fds-internal-notificationBanner-contentText-maxCollapsedHeight"}},n="w17suq18",i="w1ixs8gf",c="w1trwg7u",a="cmwsx4o",e="c1qc2rgl",o="cb6cjs3",s="cia23af",r="c1uktajc",l="c12st863",x="d1hjtr0v",f="azqyi5b",b="i6bp33n";export{f as actionButton,e as content,a as contentContainer,l as contentLink,s as contentText,r as contentTextCollapsed,o as contentWrapper,x as dismissButton,b as iconContainer,t as tokens,n as wrapper,c as wrapperClickable,i as wrapperSticky};
 //# sourceMappingURL=notification-banner.styles.js.map

package/notification-banner/notification-banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.styles.js","sources":["../../src/notification-banner/notification-banner.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Layout } from \"../layout\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface WrapperStyleProps {\n    $sticky: boolean;\n    $clickable: boolean;\n}\n\ninterface ContentStyleProps {\n    $maxCollapsedHeight?: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst commonLinkStyle = css`\n    color: ${V3_Colour[\"hyperlink-inverse\"]};\n\n    svg {\n        color: ${V3_Colour[\"icon-primary-inverse\"]};\n    }\n\n    &:hover,\n    &:active,\n    &:visited,\n    &:focus {\n        color: ${V3_Colour[\"hyperlink-inverse\"]};\n        svg {\n            color: ${V3_Colour[\"icon-primary-inverse\"]};\n        }\n    }\n`;\n\nexport const Wrapper = styled.div<WrapperStyleProps>`\n    position: ${(props) => (props.$sticky ? \"sticky\" : \"relative\")};\n    left: 0;\n    top: 0;\n    width: 100%;\n    transition: all ${V3_Motion[\"duration-800\"]} ${V3_Motion[\"ease-default\"]};\n    background: ${V3_Colour[\"bg-inverse-subtle\"]};\n    border-radius: ${V3_Radius[\"none\"]};\n    z-index: 25;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n`;\n\nexport const Container = styled(Layout.Content)``;\n\nexport const ContentContainer = styled.div`\n    flex: 1;\n    align-items: flex-start;\n    padding: ${V3_Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const Content = styled.div<ContentStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: flex-start;\n\n    ${V3_Font[\"body-baseline-regular\"]}\n    color: ${V3_Colour[\"text-inverse\"]};\n\n    p {\n        display: inline-block;\n    }\n\n    strong {\n        ${V3_Font[\"body-baseline-semibold\"]}\n        color: ${V3_Colour[\"text-inverse\"]};\n    }\n\n    a {\n        ${V3_Font[\"body-baseline-regular\"]}\n        ${commonLinkStyle}\n    }\n`;\n\nexport const ContentWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n`;\n\nexport const ContentText = styled.div<{ $maxCollapsedHeight?: number }>`\n    flex: 1;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    ${(props) => {\n        const gradient =\n            \"linear-gradient(to bottom, black 50%, transparent 100%)\";\n        if (props.$maxCollapsedHeight) {\n            return css`\n                max-height: ${props.$maxCollapsedHeight}px;\n                overflow: hidden;\n                -webkit-mask-image: ${gradient};\n                mask-image: ${gradient};\n            `;\n        }\n    }}\n`;\n\nexport const ContentLink = styled(Typography.LinkBL)`\n    position: relative;\n\n    ${commonLinkStyle}\n`;\n\nexport const StyledIconButton = styled(ClickableIcon)`\n    margin-right: -${V3_Spacing[\"spacing-24\"]};\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n    height: max-content;\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${V3_Colour[\"icon-inverse\"]};\n    }\n`;\n\nexport const ActionButton = styled.button`\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    align-self: flex-start;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n\n    border: none;\n    background: transparent;\n    color: ${V3_Colour[\"hyperlink-inverse\"]};\n    ${V3_Font[\"body-md-semibold\"]};\n\n    cursor: pointer;\n`;\n\nexport const AccessibleBannerButton = styled.button`\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n`;\n\nexport const IconContainer = styled.div`\n    height: 1.5rem;\n    width: 1.5rem;\n    margin: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-24\"]} 0 0;\n    flex-shrink: 0;\n\n    svg {\n        height: 100%;\n        width: 100%;\n        color: ${V3_Colour[\"hyperlink-inverse\"]};\n    }\n`;\n"],"names":["commonLinkStyle","css","V3_Colour","Wrapper","styled","div","props","$sticky","V3_Motion","V3_Radius","$clickable","Container","Layout","Content","ContentContainer","V3_Spacing","V3_Font","ContentWrapper","ContentText","gradient","$maxCollapsedHeight","ContentLink","Typography","LinkBL","StyledIconButton","ClickableIcon","ActionButton","button","AccessibleBannerButton","IconContainer"],"mappings":"kUA6BA,MAAMA,EAAkBC,CAAG;aACdC,EAAU;;;iBAGNA,EAAU;;;;;;;iBAOVA,EAAU;;qBAENA,EAAU;;;EAKlBC,EAAUC,EAAOC,GAAsB;gBACnCC,GAAWA,EAAMC,QAAU,SAAW;;;;sBAIjCC,EAAU,mBAAmBA,EAAU;kBAC3CN,EAAU;qBACPO,EAAgB;;cAEtBH,GAAWA,EAAMI,WAAa,UAAY;EAG5CC,EAAYP,EAAOQ,EAAOC,QAAQ,GAElCC,EAAmBV,EAAOC,GAAG;;;eAG3BU,EAAW;EAGbF,EAAUT,EAAOC,GAAsB;;;;;MAK9CW,EAAQ;aACDd,EAAU;;;;;;;UAObc,EAAQ;iBACDd,EAAU;;;;UAIjBc,EAAQ;UACRhB;;EAIGiB,EAAiBb,EAAOC,GAAG;;;;EAM3Ba,EAAcd,EAAOC,GAAqC;;;;MAIhEC,IACC,MAAMa,EACF,0DACJ,GAAIb,EAAMc,oBACN,OAAOnB,CAAG;8BACQK,EAAMc;;sCAEED;8BACRA;aAEtB;EAIKE,EAAcjB,EAAOkB,EAAWC,OAAO;;;MAG9CvB;EAGOwB,EAAmBpB,EAAOqB,EAAc;qBAChCV,EAAW;oBACZA,EAAW;;;;;iBAKdb,EAAU;;EAIdwB,EAAetB,EAAOuB,MAAM;;;WAG9BZ,EAAW;;kBAEJA,EAAW;;;;aAIhBb,EAAU;MACjBc,EAAQ;;;EAKDY,EAAyBxB,EAAOuB,MAAM;;;;;;;;EAUtCE,EAAgBzB,EAAOC,GAAG;;;cAGzBU,EAAW,iBAAiBA,EAAW;;;;;;iBAMpCb,EAAU;;"}
+{"version":3,"file":"notification-banner.styles.js","sources":["../../src/notification-banner/notification-banner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    contentText: {\n        maxCollapsedHeight:\n            \"--fds-internal-notificationBanner-contentText-maxCollapsedHeight\",\n    },\n};\n\nconst linkStyle = `\n    color: ${Colour[\"hyperlink-inverse\"]};\n\n    svg {\n        color: ${Colour[\"icon-primary-inverse\"]};\n    }\n\n    &:hover,\n    &:active,\n    &:visited,\n    &:focus {\n        color: ${Colour[\"hyperlink-inverse\"]};\n        svg {\n            color: ${Colour[\"icon-primary-inverse\"]};\n        }\n    }\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    left: 0;\n    top: 0;\n    width: 100%;\n    transition: all ${Motion[\"duration-800\"]} ${Motion[\"ease-default\"]};\n    background: ${Colour[\"bg-inverse-subtle\"]};\n    border-radius: ${Radius[\"none\"]};\n    z-index: 25;\n    cursor: default;\n`;\n\nexport const wrapperSticky = css`\n    position: sticky;\n`;\n\nexport const wrapperClickable = css`\n    cursor: pointer;\n`;\n\nexport const contentContainer = css`\n    flex: 1;\n    align-items: flex-start;\n    padding: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const content = css`\n    display: flex;\n    flex: 1;\n    align-items: flex-start;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-inverse\"]};\n\n    p {\n        display: inline-block;\n    }\n\n    strong {\n        ${Font[\"body-baseline-semibold\"]}\n        color: ${Colour[\"text-inverse\"]};\n    }\n\n    a {\n        ${Font[\"body-baseline-regular\"]}\n        ${linkStyle}\n    }\n`;\n\nexport const contentWrapper = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n`;\n\nexport const contentText = css`\n    ${tokens.contentText.maxCollapsedHeight}: initial;\n    flex: 1;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n`;\n\nexport const contentTextCollapsed = css`\n    max-height: var(${tokens.contentText.maxCollapsedHeight});\n    overflow: hidden;\n    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\nexport const contentLink = css`\n    position: relative;\n    ${linkStyle}\n`;\n\nexport const dismissButton = css`\n    margin-right: calc(${Spacing[\"spacing-24\"]} * -1);\n    padding-left: ${Spacing[\"spacing-16\"]};\n    height: max-content;\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${Colour[\"icon-inverse\"]};\n    }\n`;\n\nexport const actionButton = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n    align-self: flex-start;\n    margin-top: ${Spacing[\"spacing-8\"]};\n\n    border: none;\n    background: transparent;\n    color: ${Colour[\"hyperlink-inverse\"]};\n    ${Font[\"body-md-semibold\"]};\n\n    cursor: pointer;\n`;\n\nexport const iconContainer = css`\n    height: 1.5rem;\n    width: 1.5rem;\n    margin: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-24\"]} 0 0;\n    flex-shrink: 0;\n\n    svg {\n        height: 100%;\n        width: 100%;\n        color: ${Colour[\"hyperlink-inverse\"]};\n    }\n`;\n"],"names":["tokens","contentText","maxCollapsedHeight","wrapper","wrapperSticky","wrapperClickable","contentContainer","content","contentWrapper","contentTextCollapsed","contentLink","dismissButton","actionButton","iconContainer"],"mappings":"mFAIO,MAAMA,EAAS,CAClBC,YAAa,CACTC,mBACI,qEAyBCC,EAAO,WAYPC,EAAa,WAIbC,EAAgB,WAIhBC,EAAgB,UAMhBC,EAAO,WAuBPC,EAAc,UAMdP,EAAW,UAOXQ,EAAoB,WAOpBC,EAAW,WAKXC,EAAa,WAYbC,EAAY,UAeZC,EAAa"}

package/notification-banner/notification-banner.styles_uxlysy.css

@@ -0,0 +1,12 @@
+@layer fds{.w17suq18{position:relative;left:0;top:0;width:100%;-webkit-transition:all var(--fds-motion-duration-800) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-800) var(--fds-motion-timing-ease-default);background:var(--fds-colour-bg-inverse-subtle);border-radius:var(--fds-radius-none);z-index:25;cursor:default;}
+.w1ixs8gf{position:-webkit-sticky;position:sticky;}
+.w1trwg7u{cursor:pointer;}
+.cmwsx4o{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding:var(--fds-spacing-24) 0;}
+.c1qc2rgl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-inverse);}.c1qc2rgl p{display:inline-block;}.c1qc2rgl strong{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-inverse);}.c1qc2rgl a{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-hyperlink-inverse);}.c1qc2rgl a svg{color:var(--fds-colour-icon-primary-inverse);}.c1qc2rgl a:hover,.c1qc2rgl a:active,.c1qc2rgl a:visited,.c1qc2rgl a:focus{color:var(--fds-colour-hyperlink-inverse);}.c1qc2rgl a:hover svg,.c1qc2rgl a:active svg,.c1qc2rgl a:visited svg,.c1qc2rgl a:focus svg{color:var(--fds-colour-icon-primary-inverse);}
+.cb6cjs3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}
+.cia23af{--fds-internal-notificationBanner-contentText-maxCollapsedHeight:initial;-webkit-flex:1;-ms-flex:1;flex:1;word-wrap:break-word;overflow-wrap:break-word;}
+.c1uktajc{max-height:var(--fds-internal-notificationBanner-contentText-maxCollapsedHeight);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}
+.c12st863{position:relative;color:var(--fds-colour-hyperlink-inverse);}.c12st863 svg{color:var(--fds-colour-icon-primary-inverse);}.c12st863:hover,.c12st863:active,.c12st863:visited,.c12st863:focus{color:var(--fds-colour-hyperlink-inverse);}.c12st863:hover svg,.c12st863:active svg,.c12st863:visited svg,.c12st863:focus svg{color:var(--fds-colour-icon-primary-inverse);}
+.d1hjtr0v{margin-right:calc(var(--fds-spacing-24) * -1);padding-left:var(--fds-spacing-16);height:-webkit-max-content;height:-moz-max-content;height:max-content;}.d1hjtr0v svg{height:1.5rem;width:1.5rem;color:var(--fds-colour-icon-inverse);}
+.azqyi5b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-4);-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;margin-top:var(--fds-spacing-8);border:none;background:transparent;color:var(--fds-colour-hyperlink-inverse);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;}
+.i6bp33n{height:1.5rem;width:1.5rem;margin:var(--fds-spacing-24) var(--fds-spacing-24) 0 0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.i6bp33n svg{height:100%;width:100%;color:var(--fds-colour-hyperlink-inverse);}}

package/notification-banner/types.d.ts

@@ -1,27 +1,82 @@
 import type { TypographyLinkProps, TypographyProps } from "../typography";
+/**
+ * Props for the `NotificationBanner` component.
+ *
+ * When `onClick` is provided, the entire banner becomes interactive and a
+ * visually hidden accessible button is rendered for keyboard and screen-reader
+ * users.
+ */
 export interface NotificationBannerProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode | undefined;
+    /**
+     * Whether the dismiss button is rendered. The caller is responsible
+     * for dismissing the banner in the callback.
+     *
+     * @default true
+     */
     dismissible?: boolean | undefined;
+    /**
+     * Controls the visibility of the banner.
+     *
+     * @default true
+     */
     visible?: boolean | undefined;
+    /**
+     * Whether the banner sticks to the top of the viewport while the page
+     * scrolls.
+     *
+     * @default true
+     */
     sticky?: boolean | undefined;
+    /**
+     * An optional icon element rendered at the leading edge of the banner.
+     */
     icon?: JSX.Element | undefined;
+    /**
+     * Called when the user activates the dismiss button and `dismissible` is `true`.
+     */
     onDismiss?: (() => void) | undefined;
     "data-testid"?: string | undefined;
-    /** Specifies the maximum height of content, after which it is collapsed */
+    /**
+     * Maximum height in pixels for the content area. When the rendered content
+     * exceeds this value, the overflow is clipped.
+     */
     maxCollapsedHeight?: number | undefined;
-    /** Action button that will be displayed */
+    /**
+     * An action button rendered inside the content area. When
+     * `actionButton.onClick` is provided it stops propagation to the banner's
+     * own `onClick` handler.
+     */
     actionButton?: React.ButtonHTMLAttributes<HTMLButtonElement> | undefined;
 }
+/**
+ * Props for the `withNotificationBanner` HOC wrapper,
+ * extending `NotificationBannerProps` with a forwarded ref.
+ */
 export interface NotificationBannerWithForwardedRefProps extends NotificationBannerProps {
     forwardedRef?: React.Ref<HTMLDivElement> | undefined;
 }
+/**
+ * Discriminant for `NotificationContentAttributes` content items.
+ *
+ * - `"text"` items are sanitized and injected as HTML paragraphs.
+ * - `"link"` items are rendered as `NotificationBanner.Link` elements.
+ */
 export type ContentType = "text" | "link";
+/** Props for a `"link"` content item inside a notification banner. */
 export interface ContentLinkAttributes extends TypographyLinkProps {
 }
+/** Props for a `"text"` content item inside a notification banner. */
 export interface ContentTextAttributes extends TypographyProps {
 }
+/**
+ * A single content item for use with `withNotificationBanner`.
+ */
 export interface NotificationContentAttributes {
+    /** Determines how `content` is rendered inside the banner. */
     type: ContentType;
+    /** The text string or link label to display. */
     content: string;
+    /** Additional props forwarded to the rendered text or link element. */
     otherAttributes?: TypographyLinkProps | TypographyProps | undefined;
 }

package/otp-input/otp-input.d.ts

@@ -1,3 +1,11 @@
 import type React from "react";
 import type { OtpInputProps, OtpInputRef } from "./types";
+/**
+ * A field composed of individual inputs for a numeric one-time password
+ * with an in-built countdown mechanism.
+ *
+ * Use `OtpInput` when users must enter the one-time password (OTP)
+ * for multi-factored authentication methods.
+ * @keywords 2FA, authentication, code, MFA, one-time password, verification
+ */
 export declare const OtpInput: (props: OtpInputProps & React.RefAttributes<OtpInputRef>) => React.ReactElement | null;

package/otp-input/otp-input.js

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

package/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 clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { Input } from \"../input\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles 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        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\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        // eslint-disable-next-line react-hooks/exhaustive-deps\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        <div\n            id={id}\n            data-testid={dataTestId}\n            className={clsx(styles.wrapper, className)}\n        >\n            <div\n                className={styles.inputContainer}\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Typography.BodyBL\n                        as=\"span\"\n                        className={styles.prefix}\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Typography.BodyBL>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <Input\n                            className={styles.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            </div>\n            {errorMessage && (\n                <FormErrorMessage id={errorId} data-testid=\"otp-error-message\">\n                    {errorMessage}\n                </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                <Button\n                    className={styles.ctaButton}\n                    styleType={styleType}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A field composed of individual inputs for a numeric one-time password\n * with an in-built countdown mechanism.\n *\n * Use `OtpInput` when users must enter the one-time password (OTP)\n * for multi-factored authentication methods.\n * @keywords 2FA, authentication, code, MFA, one-time password, verification\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","clsx","styles.wrapper","children","styles.inputContainer","role","Typography","BodyBL","as","styles.prefix","weight","_jsx","VisuallyHidden","separator","map","data","Input","Object","assign","styles.inputField","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","Button","styles.ctaButton","sizeType"],"mappings":"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"}

package/otp-input/otp-input.styles.d.ts

@@ -1,7 +1,5 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").InputProps & import("react").RefAttributes<HTMLInputElement>, never>> & string & Omit<(props: import("..").InputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const CTAButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Prefix: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const inputContainer: import("@linaria/core").LinariaClassName;
+export declare const inputField: import("@linaria/core").LinariaClassName;
+export declare const ctaButton: import("@linaria/core").LinariaClassName;
+export declare const prefix: import("@linaria/core").LinariaClassName;

package/otp-input/otp-input.styles.js

@@ -1,23 +1,2 @@
-import i from"styled-components";import{Button as t}from"../button/button.js";import{Input as n}from"../input/input.js";import{Typography as o}from"../typography/index.js";import{V3_Spacing as e}from"../v3_theme/index.js";const r=i.div`
-    display: flex;
-    flex-direction: column;
-`,m=i.div`
-    display: flex;
-    flex-direction: row;
-    align-self: center;
-    align-items: center;
-    gap: ${e["spacing-8"]};
-`,p=i(n)`
-    min-width: 20px;
-    margin-bottom: 0rem !important;
-
-    input {
-        padding: 0;
-        text-align: center;
-    }
-`,l=i(t.Small)`
-    margin: ${e["spacing-32"]} 0;
-`,a=i(o.BodyBL)`
-    flex-shrink: 0;
-`;export{l as CTAButton,m as InputContainer,p as InputField,a as Prefix,r as Wrapper};
+import"./otp-input.styles_5sbutl.css";const t="w3oye99",i="i1f2709h",p="i1ile0is",s="cvrt5zi",o="p1lfz4i";export{s as ctaButton,i as inputContainer,p as inputField,o as prefix,t as wrapper};
 //# sourceMappingURL=otp-input.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"otp-input.styles.js","sources":["../../src/otp-input/otp-input.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { Input } from \"../input\";\nimport { Typography } from \"../typography\";\nimport { V3_Spacing } from \"../v3_theme\";\n\nexport const Wrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const InputField = styled(Input)`\n    min-width: 20px;\n    margin-bottom: 0rem !important;\n\n    input {\n        padding: 0;\n        text-align: center;\n    }\n`;\n\nexport const CTAButton = styled(Button.Small)`\n    margin: ${V3_Spacing[\"spacing-32\"]} 0;\n`;\n\nexport const Prefix = styled(Typography.BodyBL)`\n    flex-shrink: 0;\n`;\n"],"names":["Wrapper","styled","div","InputContainer","V3_Spacing","InputField","Input","CTAButton","Button","Small","Prefix","Typography","BodyBL"],"mappings":"8NAOO,MAAMA,EAAUC,EAAOC,GAAG;;;EAKpBC,EAAiBF,EAAOC,GAAG;;;;;WAK7BE,EAAW;EAGTC,EAAaJ,EAAOK,EAAM;;;;;;;;EAU1BC,EAAYN,EAAOO,EAAOC,MAAM;cAC/BL,EAAW;EAGZM,EAAST,EAAOU,EAAWC,OAAO;;"}
+{"version":3,"file":"otp-input.styles.js","sources":["../../src/otp-input/otp-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const inputField = css`\n    input {\n        padding: 0;\n        text-align: center;\n    }\n`;\n\nexport const ctaButton = css`\n    margin: ${Spacing[\"spacing-32\"]} 0;\n`;\n\nexport const prefix = css`\n    flex-shrink: 0;\n`;\n"],"names":["wrapper","inputContainer","inputField","ctaButton","prefix"],"mappings":"+DAIO,MAAMA,EAAO,UAKPC,EAAc,WAQdC,EAAU,WAOVC,EAAS,UAITC,EAAM"}

package/otp-input/otp-input.styles_5sbutl.css

@@ -0,0 +1,5 @@
+@layer fds{.w3oye99{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.i1f2709h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);}
+.i1ile0is input{padding:0;text-align:center;}
+.cvrt5zi{margin:var(--fds-spacing-32) 0;}
+.p1lfz4i{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}

package/otp-input/types.d.ts

@@ -1,34 +1,82 @@
 import type { ButtonProps } from "../button";
+/**
+ * Props for the prefix label rendered before the OTP input cells.
+ */
+type OtpInputPrefix = {
+    /** Prefix text, usually a few alphabetic characters. */
+    value: string;
+    /**
+     * Separator between the prefix and the OTP input.
+     * Only `"-"` is supported.
+     */
+    separator: "-";
+};
+/**
+ * Props for the `OtpInput` component.
+ */
 export interface OtpInputProps extends React.AriaAttributes {
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
-    /** The array of input values */
+    /**
+     * Controlled array of digit strings, one entry per input cell.
+     * Only applied when the array length equals `numOfInput`.
+     */
     value?: string[] | undefined;
+    /**
+     * Error text displayed below the input cells.
+     */
     errorMessage?: string | React.ReactNode | undefined;
-    /** The duration (in seconds) to disable the submit button after a click is made */
+    /**
+     * Duration in seconds to disable the action button after it is clicked.
+     * Pass `0` to skip the cooldown entirely.
+     */
     cooldownDuration: number;
-    /** The props for the submit button */
+    /**
+     * Props forwarded to the action button. When `children` is not provided,
+     * the button label defaults to `"Resend OTP"`, or `"Resend OTP in X seconds"`
+     * while a cooldown is active.
+     *
+     * @default styleType: "secondary"
+     */
     actionButtonProps?: ButtonProps | undefined;
-    /** Flag to indicate if only OTP inputs should be rendered without the action button */
+    /**
+     * When `true`, renders only the OTP input cells without the action button.
+     */
     otpOnly?: boolean | undefined;
-    /** The number of characters for the Otp */
+    /**
+     * Number of single-digit input cells to render.
+     */
     numOfInput: number;
-    prefix?: {
-        /** Optional OTP prefix, usually consisting of a few alphabetic characters */
-        value: string;
-        /** separator between prefix and otp digits. Only "-" supported for now */
-        separator: "-";
-    } | undefined;
-    /** Called when one of the input is changed. Returns an array of all the input values */
+    /**
+     * Optional prefix label rendered before the input cells.
+     */
+    prefix?: OtpInputPrefix | undefined;
+    /**
+     * Called when any input cell changes.
+     *
+     * @param value Array of all input cell values, one string per cell.
+     */
     onChange?: ((value: string[]) => void) | undefined;
-    /** Called when the countdown changes. Returns the remaining time in seconds */
+    /**
+     * Called each second while a cooldown countdown is active.
+     *
+     * @param remaining Seconds remaining in the current cooldown.
+     */
     onCountdownChange?: ((remaining: number) => void) | undefined;
-    /** Called when the cooldown begins */
+    /** Called when a cooldown period begins. */
     onCooldownStart?: (() => void) | undefined;
-    /** Called when the cooldown ends */
+    /** Called when a cooldown period ends. */
     onCooldownEnd?: (() => void) | undefined;
 }
+/**
+ * Imperative handle returned by `OtpInput` via `ref`.
+ */
 export type OtpInputRef = {
+    /**
+     * Starts a new cooldown countdown without clearing the input cells.
+     * Fires `onCooldownStart` and begins the countdown timer.
+     */
     startCooldown: () => void;
 };
+export {};

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

@@ -1,2 +1,2 @@
 import type { ContactInputSectionProps } from "./internal-types";
-export declare const ContactInputSection: ({ id, "data-testid": dataTestId, disabled, readOnly, inputId, type, sendOtpPlaceholder, emailValue, onEmailChange, phoneNumberValue, onPhoneNumberChange, fixedCountry, isLoading, isVerified, countdown, onSendOtp, onStateReset, sendOtpError, }: ContactInputSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactInputSection: ({ id, "data-testid": dataTestId, disabled, readOnly, inputId, type, sendOtpPlaceholder, emailValue, onEmailChange, phoneNumberValue, onPhoneNumberChange, fixedCountry, isLoading, isVerified, countdown, onSendOtp, onStateReset, sendOtpError, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ContactInputSectionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{TickCircleFillIcon as t}from"@lifesg/react-icons";import{FormErrorMessage as a}from"../form/form-label.js";import{ContactSectionWrapper as n,ContactInputSectionWrapper as r,ContactInputWrapper as d,VerifiedIconWrapper as o,ContactButton as l,EmailContactInput as c,PhoneContactInput as s}from"./contact-input-section-styles.js";const u=({id:u,"data-testid":m,disabled:p,readOnly:h,inputId:b,type:f,sendOtpPlaceholder:g,emailValue:v,onEmailChange:y,phoneNumberValue:$,onPhoneNumberChange:O,fixedCountry:C,isLoading:x,isVerified:V,countdown:E,onSendOtp:P,onStateReset:S,sendOtpError:j})=>{const R=e=>{S(),"phone-number"===f&&O&&O(e)};return e(n,{id:u,"data-testid":m,children:[e(r,{children:[e(d,{$isMaxWidth:"email"===f,$error:!!j,$disabled:p,$readonly:h,children:["email"===f?i(c,{id:b,"data-testid":m?`${m}-contact-input`:void 0,placeholder:g||"Enter email",value:v,onChange:e=>{S(),"email"===f&&y&&y(e.target.value)},type:"email",noBorder:!0,"aria-invalid":!!j,"aria-required":!0,disabled:p,readOnly:h}):i(s,{id:b,"data-testid":m?`${m}-contact-input`:void 0,placeholder:g||"Enter mobile number",value:$,onChange:R,noBorder:!0,fixedCountry:C,"aria-invalid":!!j,"aria-required":!0,disabled:p,readOnly:h}),V&&i(o,{"aria-label":"Verified",role:"img",children:i(t,{})})]}),!p&&!h&&i(l,{id:u?`${u}-contact-button`:void 0,type:"button","data-testid":m?`${m}-contact-button`:void 0,onClick:P,disabled:E.isRunning||V,loading:x,children:V?"Verified":x?"":E.isRunning?"Sent OTP":"Send OTP"})]}),j&&i(a,{id:u?`${u}-contact-error`:void 0,"data-testid":m?`${m}-contact-error`:void 0,role:"alert",children:j})]})};export{u as ContactInputSection};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{TickCircleFillIcon as a}from"@lifesg/react-icons";import r from"clsx";import{Button as t}from"../button/button.js";import{FormErrorMessage as n}from"../form/form-label/form-label.js";import{InputGroup as o}from"../input-group/input-group.js";import{PhoneNumberInput as d}from"../phone-number-input/phone-number-input.js";import{concatIds as l}from"../shared/accessibility/index.js";import{contactSectionWrapper as s,contactInputSectionWrapper as m,verifiedIconWrapper as c,contactInputWrapper as u,contactInputWrapperError as b,contactInputWrapperDisabled as p,contactInputWrapperReadonly as v,contactButton as f,emailContactInput as h,emailContactInputDisabled as y,emailContactInputReadonly as g,phoneContactInput as O,phoneContactInputDisabled as N,phoneContactInputReadonly as j}from"./contact-input-section.styles.js";const x=({id:x,"data-testid":C,disabled:E,readOnly:P,inputId:$,type:V,sendOtpPlaceholder:S,emailValue:T,onEmailChange:R,phoneNumberValue:q,onPhoneNumberChange:w,fixedCountry:B,isLoading:L,isVerified:k,countdown:A,onSendOtp:I,onStateReset:z,sendOtpError:D,"aria-labelledby":F,"aria-describedby":G})=>{const H=x?`${x}-contact-error`:void 0,J=e=>{z(),"email"===V&&R&&R(e.target.value)},K=e=>{z(),"phone-number"===V&&w&&w(e)},M=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("div",{id:x,"data-testid":C,className:s,children:[e("div",{className:m,children:[e("div",{"data-max-width":"email"===V,className:r(u,!!D&&b,E&&p,P&&v),children:["email"===V?i(o,{id:$,"data-testid":C?`${C}-contact-input`:void 0,placeholder:S||"Enter email",value:T,onChange:J,type:"email",noBorder:!0,"aria-invalid":!!D,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-labelledby":F,"aria-describedby":l(D?H:void 0,G),disabled:E,readOnly:P,className:r(h,E&&y,P&&g)}):i(d,{id:$,"data-testid":C?`${C}-contact-input`:void 0,placeholder:S||"Enter mobile number",value:q,onChange:K,noBorder:!0,fixedCountry:B,"aria-invalid":!!D,"aria-required":!0,getAriaLabel:M,"aria-labelledby":F,"aria-describedby":l(D?H:void 0,G),disabled:E,readOnly:P,className:r(O,E&&N,P&&j)}),k&&i("div",{className:c,"aria-label":"Verified",role:"img",children:i(a,{})})]}),!E&&!P&&i(t,{type:"button","data-testid":C?`${C}-contact-button`:void 0,onClick:I,disabled:A.isRunning||k,loading:L,className:f,children:k?"Verified":L?"":A.isRunning?"Sent OTP":"Send OTP"})]}),D&&i(n,{id:H,"data-testid":C?`${C}-contact-error`:void 0,role:"alert",children:D})]})};export{x as ContactInputSection};
 //# sourceMappingURL=contact-input-section.js.map