npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.4 - Mend

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

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

Files changed (2426) hide show

package/cjs/notification-banner/notification-banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n AccessibleBannerButton,\n ActionButton,\n Container,\n Content,\n ContentContainer,\n ContentLink as NBLink,\n ContentText,\n ContentWrapper,\n IconContainer,\n StyledIconButton,\n Wrapper,\n} from \"./notification-banner.styles\";\nimport type {\n NotificationBannerProps,\n NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n children,\n visible = true,\n dismissible = true,\n sticky = true,\n onDismiss,\n id,\n forwardedRef,\n maxCollapsedHeight,\n onClick,\n actionButton,\n icon,\n ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const testId = otherProps[\"data-testid\"];\n\n const [isVisible, setVisible] = useState<boolean>(visible);\n const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setVisible(visible);\n }, [visible]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n setVisible(false);\n\n if (dismissible && onDismiss) onDismiss();\n };\n\n const handleActionButtonOnClick = (\n event: React.MouseEvent<HTMLButtonElement>\n ) => {\n if (!actionButton?.onClick) {\n // let it bubble\n return;\n }\n event.stopPropagation();\n actionButton.onClick(event);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n if (!isVisible) return null;\n\n const renderDismissButton = () => (\n <StyledIconButton\n tabIndex={0}\n onClick={handleDismiss}\n id={formatId(\"dismiss-button\", id)}\n data-testid={formatId(\"dismiss-button\", testId)}\n focusOutline=\"browser\"\n focusHighlight={false}\n type=\"button\"\n aria-label=\"close\"\n >\n <CrossIcon aria-hidden />\n </StyledIconButton>\n );\n\n const renderActionButton = () => {\n if (!actionButton) return null;\n\n return (\n <ActionButton\n id={formatId(\"action-button\", id)}\n data-testid={formatId(\"action-button\", testId)}\n type=\"button\"\n {...actionButton}\n onClick={handleActionButtonOnClick}\n >\n {actionButton.children}\n </ActionButton>\n );\n };\n\n const renderContent = () => (\n <Content data-testid={formatId(\"text-content\", testId)}>\n <ContentWrapper>\n <ContentText\n $maxCollapsedHeight={\n maxCollapsedHeight && contentHeight > maxCollapsedHeight\n ? maxCollapsedHeight\n : undefined\n }\n >\n <div ref={contentRef}>{children}</div>\n </ContentText>\n {renderActionButton()}\n </ContentWrapper>\n </Content>\n );\n\n const renderAccessibleBannerButton = () => (\n <AccessibleBannerButton aria-label={\"Clickable banner\"} type=\"button\" />\n );\n\n return (\n <Wrapper\n ref={forwardedRef}\n $sticky={sticky}\n $clickable={!!onClick}\n onClick={onClick}\n role=\"region\"\n {...otherProps}\n >\n <Container id={formatId(\"container\", id)}>\n {icon && <IconContainer aria-hidden>{icon}</IconContainer>}\n <ContentContainer>{renderContent()}</ContentContainer>\n {dismissible && renderDismissButton()}\n </Container>\n {onClick && renderAccessibleBannerButton()}\n </Wrapper>\n );\n};\n\n/*\n Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n props: NotificationBannerProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n return <NBComponent {...props} forwardedRef={ref} />;\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\nexport const NotificationBanner = Object.assign(Base, {\n Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","Wrapper","Object","assign","$sticky","$clickable","role","Container","formatId","_jsx","IconContainer","ContentContainer","Content","ContentWrapper","ContentText","$maxCollapsedHeight","undefined","ActionButton","type","StyledIconButton","tabIndex","focusOutline","focusHighlight","CrossIcon","AccessibleBannerButton","componentName","Base","React","forwardRef","props","displayName","NotificationBanner","Link","NBLink"],"mappings":"8TAuBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,QACRA,GAAU,EAAIC,YACdA,GAAc,EAAIC,OAClBA,GAAS,EAAIC,UACbA,EAASC,GACTA,EAAEC,aACFA,EAAYC,mBACZA,EAAkBC,QAClBA,EAAOC,aACPA,EAAYC,KACZA,GAAIX,EACDY,EAAUC,EAAAA,OAAAb,EAZW,oIAiBxB,MAAMc,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAAA,SAAkBf,IAC1CgB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,sBAKvDC,EAAAA,WAAU,KACNP,EAAWd,EAAQ,GACpB,CAACA,IAKJ,MAAMsB,EAAiBC,IACnBA,EAAMC,kBACNV,GAAW,GAEPb,GAAeE,GAAWA,GAAW,EAGvCsB,EACFF,KAEKf,aAAY,EAAZA,EAAcD,WAInBgB,EAAMC,kBACNhB,EAAaD,QAAQgB,GAAM,EAM/B,IAAKV,EAAW,OAAO,KAsDvB,OACIa,OAACC,EAAAA,QAAOC,OAAAC,OAAA,CACJX,IAAKb,EAAYyB,QACR5B,EAAM6B,aACDxB,EACdA,QAASA,EACTyB,KAAK,UACDtB,EAAU,CAAAX,SAAA,CAEd2B,EAAAA,KAACO,EAAAA,UAAS,CAAC7B,GAAI8B,EAAS,YAAa9B,GAAGL,SAAA,CACnCU,GAAQ0B,EAAAA,IAACC,EAAAA,cAAa,CAAA,eAAA,EAAArC,SAAcU,IACrC0B,EAAAA,IAACE,EAAAA,iBAAgB,CAAAtC,SA/BzBoC,EAAAA,IAACG,EAAAA,QAAO,CAAA,cAAcJ,EAAS,eAAgBtB,GAAOb,SAClD2B,EAAAA,KAACa,EAAAA,eAAc,CAAAxC,SAAA,CACXoC,EAAAA,IAACK,EAAAA,YAAW,CAAAC,oBAEJnC,GAAsBW,EAAgBX,EAChCA,OACAoC,EAAS3C,SAGnBoC,EAAAA,IAAA,MAAA,CAAKjB,IAAKC,EAAUpB,SAAGA,MAzB9BS,EAGD2B,MAACQ,EAAAA,aAAYf,OAAAC,OAAA,CACTzB,GAAI8B,EAAS,gBAAiB9B,GAAG,cACpB8B,EAAS,gBAAiBtB,GACvCgC,KAAK,UACDpC,EAAY,CAChBD,QAASkB,WAERjB,EAAaT,YAVI,YAgDjBE,GA/DTkC,EAAAA,IAACU,EAAAA,iBAAgB,CACbC,SAAU,EACVvC,QAASe,EACTlB,GAAI8B,EAAS,iBAAkB9B,GAAG,cACrB8B,EAAS,iBAAkBtB,GACxCmC,aAAa,UACbC,gBAAgB,EAChBJ,KAAK,SAAQ,aACF,QAAO7C,SAElBoC,EAAAA,IAACc,YAAS,CAAA,eAAA,SAuDT1C,GAjBL4B,EAAAA,IAACe,yBAAsB,CAAA,aAAa,mBAAoBN,KAAK,cAkBnD,EAiBZV,EAAW,CAACiB,EAAuB/C,EAAK,YACnC,GAAGA,KAAM+C,IAMdC,OAAOC,QAAMC,YAjBD,CACdC,EACArC,IAEOiB,EAAAA,IAACtC,EAAW+B,OAAAC,OAAA,GAAK0B,GAAOlD,aAAca,OAchDkC,EAA8BI,YAAc,2BAChCC,EAAqB7B,OAAOC,OAAOuB,EAAM,CAClDM,KAAMC,EAAAA"}
1	+ {"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n NotificationBannerProps,\n NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n children,\n visible = true,\n dismissible = true,\n sticky = true,\n onDismiss,\n id,\n forwardedRef,\n maxCollapsedHeight,\n onClick,\n actionButton,\n icon,\n className,\n ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const testId = otherProps[\"data-testid\"];\n\n const [isVisible, setVisible] = useState<boolean>(visible);\n const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n const contentTextRef = useRef<HTMLDivElement>(null);\n\n const isCollapsed =\n maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n useApplyStyle(contentTextRef, {\n [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n ? formatUnitValue(maxCollapsedHeight, \"px\")\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setVisible(visible);\n }, [visible]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n setVisible(false);\n\n if (dismissible && onDismiss) onDismiss();\n };\n\n const handleActionButtonOnClick = (\n event: React.MouseEvent<HTMLButtonElement>\n ) => {\n if (!actionButton?.onClick) {\n // let it bubble\n return;\n }\n event.stopPropagation();\n actionButton.onClick(event);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n if (!isVisible) return null;\n\n const renderDismissButton = () => (\n <ClickableIcon\n className={styles.dismissButton}\n tabIndex={0}\n onClick={handleDismiss}\n id={formatId(\"dismiss-button\", id)}\n data-testid={formatId(\"dismiss-button\", testId)}\n focusOutline=\"browser\"\n focusHighlight={false}\n type=\"button\"\n aria-label=\"close\"\n >\n <CrossIcon aria-hidden />\n </ClickableIcon>\n );\n\n const renderActionButton = () => {\n if (!actionButton) return null;\n\n return (\n <button\n className={styles.actionButton}\n id={formatId(\"action-button\", id)}\n data-testid={formatId(\"action-button\", testId)}\n type=\"button\"\n {...actionButton}\n onClick={handleActionButtonOnClick}\n >\n {actionButton.children}\n </button>\n );\n };\n\n const renderContent = () => (\n <div\n className={styles.content}\n data-testid={formatId(\"text-content\", testId)}\n >\n <div className={styles.contentWrapper}>\n <div\n ref={contentTextRef}\n className={clsx(\n styles.contentText,\n isCollapsed && styles.contentTextCollapsed\n )}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n {renderActionButton()}\n </div>\n </div>\n );\n\n const renderAccessibleBannerButton = () => (\n <VisuallyHidden>\n <button aria-label={\"Clickable banner\"} type=\"button\" />\n </VisuallyHidden>\n );\n\n return (\n <div\n ref={forwardedRef}\n className={clsx(\n styles.wrapper,\n sticky && styles.wrapperSticky,\n !!onClick && styles.wrapperClickable,\n className\n )}\n onClick={onClick}\n role=\"region\"\n {...otherProps}\n >\n <Layout.Content id={formatId(\"container\", id)}>\n {icon && (\n <div className={styles.iconContainer} aria-hidden>\n {icon}\n </div>\n )}\n <div className={styles.contentContainer}>{renderContent()}</div>\n {dismissible && renderDismissButton()}\n </Layout.Content>\n {onClick && renderAccessibleBannerButton()}\n </div>\n );\n};\n\n/*\n Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n props: NotificationBannerProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n return (\n <Typography.LinkBL\n ref={ref}\n className={clsx(styles.contentLink, props.className)}\n {...props}\n />\n );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\nexport const NotificationBanner = Object.assign(Base, {\n Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"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"}

package/cjs/notification-banner/notification-banner.styles.js CHANGED Viewed

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

package/cjs/notification-banner/notification-banner.styles.js.map CHANGED Viewed

	@@ -1 +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":"~~iSA6BA~~,~~MAAMA~~,~~EAAkBC~~,~~EAAAA~~,~~GAAG;aACdC~~,~~EAAAA~~,~~UAAU;;;iBAGNA~~,~~EAAAA~~,~~UAAU;;;;;;;iBAOVA~~,~~EAAAA~~,~~UAAU;;qBAENA~~,~~EAAAA~~,~~UAAU;;;EAKlBC~~,~~EAAUC~~,~~EAAAA~~,QAAOC,GAAsB;gBACnCC,GAAWA,EAAMC,QAAU,SAAW;;;;sBAIjCC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;kBAC3CN,EAAAA,UAAU;qBACPO,EAAAA,UAAgB;;cAEtBH,GAAWA,EAAMI,WAAa,UAAY;EAG5CC,EAAYP,EAAAA,QAAOQ,SAAOC,QAAQ,GAElCC,EAAmBV,EAAAA,QAAOC,GAAG;;;eAG3BU,EAAAA,WAAW;EAGbF,EAAUT,EAAAA,QAAOC,GAAsB;;;;;MAK9CW,EAAAA,QAAQ;aACDd,EAAAA,UAAU;;;;;;;UAObc,EAAAA,QAAQ;iBACDd,EAAAA,UAAU;;;;UAIjBc,EAAAA,QAAQ;UACRhB;;EAIGiB,EAAiBb,EAAAA,QAAOC,GAAG;;;;EAM3Ba,EAAcd,EAAAA,QAAOC,GAAqC;;;;MAIhEC,IACC,MAAMa,EACF,0DACJ,GAAIb,EAAMc,oBACN,OAAOnB,KAAG;8BACQK,EAAMc;;sCAEED;8BACRA;aAEtB;EAIKE,EAAcjB,EAAAA,QAAOkB,aAAWC,OAAO;;;MAG9CvB;EAGOwB,EAAmBpB,EAAAA,QAAOqB,EAAAA,cAAc;qBAChCV,EAAAA,WAAW;oBACZA,EAAAA,WAAW;;;;;iBAKdb,EAAAA,UAAU;;EAIdwB,EAAetB,EAAAA,QAAOuB,MAAM;;;WAG9BZ,EAAAA,WAAW;;kBAEJA,EAAAA,WAAW;;;;aAIhBb,EAAAA,UAAU;MACjBc,EAAAA,QAAQ;;;EAKDY,EAAyBxB,EAAAA,QAAOuB,MAAM;;;;;;;;EAUtCE,EAAgBzB,EAAAA,QAAOC,GAAG;;;cAGzBU,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;;;;iBAMpCb,EAAAA,UAAU;;"}
1	+ {"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":["contentText","maxCollapsedHeight"],"mappings":"wHAsHyB,0BA5DL,oCANS,8BAiDL,+BAdA,uCAOS,kCAbN,gCAyBD,iCA2BA,yBAjIJ,CAClBA,YAAa,CACTC,mBACI,qFAyBQ,oCAgBS,iCAJH"}

package/cjs/notification-banner/notification-banner.styles_uxlysy.css ADDED Viewed

@@ -0,0 +1,12 @@
+.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/cjs/otp-input/otp-input.js CHANGED Viewed

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

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

	@@ -1 +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 { 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"}
1	+ {"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 }, []);\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 <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\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/cjs/otp-input/otp-input.styles.js CHANGED Viewed

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

package/cjs/otp-input/otp-input.styles.js.map CHANGED Viewed

	@@ -1 +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":"~~yQAOO~~,~~MAAMA~~,~~EAAUC~~,~~EAAAA~~,~~QAAOC,GAAG;;;EAKpBC,EAAiBF,EAAAA,QAAOC,GAAG;;;;;WAK7BE,EAAAA,WAAW;EAGTC,EAAaJ,EAAAA,QAAOK,EAAAA,MAAM;;;;;;;;EAU1BC,EAAYN,EAAAA,QAAOO,SAAOC,MAAM;cAC/BL,EAAAA,WAAW;EAGZM,EAAST,EAAAA,QAAOU,aAAWC,OAAO;;~~"}
1	+ {"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":[],"mappings":"iGAwBsB,iCAfK,8BAQJ,0BAWJ,0BAxBC"}

package/cjs/otp-input/otp-input.styles_5sbutl.css ADDED Viewed

@@ -0,0 +1,5 @@
+.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/cjs/otp-verification/contact-input-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"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})]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),t=require("clsx"),i=require("../button/button.js"),r=require("../form/form-label.js"),n=require("../input-group/input-group.js"),o=require("../phone-number-input/phone-number-input.js"),d=require("../shared/accessibility/index.js"),l=require("./contact-input-section.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(t);exports.ContactInputSection=({id:t,"data-testid":c,disabled:u,readOnly:p,inputId:b,type:m,sendOtpPlaceholder:v,emailValue:h,onEmailChange:y,phoneNumberValue:I,onPhoneNumberChange:f,fixedCountry:j,isLoading:g,isVerified:x,countdown:C,onSendOtp:q,onStateReset:N,sendOtpError:O,"aria-labelledby":E,"aria-describedby":P})=>{const S=t?`${t}-contact-error`:void 0,W=e=>{N(),"email"===m&&y&&y(e.target.value)},R=e=>{N(),"phone-number"===m&&f&&f(e)},$=e=>{var a;return`Enter your ${null!==(a=null==e?void 0:e.name)&&void 0!==a?a:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs("div",{id:t,"data-testid":c,className:l.contactSectionWrapper,children:[e.jsxs("div",{className:l.contactInputSectionWrapper,children:[e.jsxs("div",{"data-max-width":"email"===m,className:s.default(l.contactInputWrapper,!!O&&l.contactInputWrapperError,u&&l.contactInputWrapperDisabled,p&&l.contactInputWrapperReadonly),children:["email"===m?e.jsx(n.InputGroup,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter email",value:h,onChange:W,type:"email",noBorder:!0,"aria-invalid":!!O,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.emailContactInput,u&&l.emailContactInputDisabled,p&&l.emailContactInputReadonly)}):e.jsx(o.PhoneNumberInput,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter mobile number",value:I,onChange:R,noBorder:!0,fixedCountry:j,"aria-invalid":!!O,"aria-required":!0,getAriaLabel:$,"aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.phoneContactInput,u&&l.phoneContactInputDisabled,p&&l.phoneContactInputReadonly)}),x&&e.jsx("div",{className:l.verifiedIconWrapper,"aria-label":"Verified",role:"img",children:e.jsx(a.TickCircleFillIcon,{})})]}),!u&&!p&&e.jsx(i.Button,{type:"button","data-testid":c?`${c}-contact-button`:void 0,onClick:q,disabled:C.isRunning||x,loading:g,className:l.contactButton,children:x?"Verified":g?"":C.isRunning?"Sent OTP":"Send OTP"})]}),O&&e.jsx(r.FormErrorMessage,{id:S,"data-testid":c?`${c}-contact-error`:void 0,role:"alert",children:O})]})};
 //# sourceMappingURL=contact-input-section.js.map

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

	@@ -1 +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 {\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"}
1	+ {"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport type {\n CountryValue,\n PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { PhoneNumberInput } from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport * as styles 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 \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\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 <InputGroup\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-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n className={clsx(\n styles.emailContactInput,\n disabled && styles.emailContactInputDisabled,\n readOnly && styles.emailContactInputReadonly\n )}\n />\n ) : (\n <PhoneNumberInput\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 getAriaLabel={getMobileAriaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n className={clsx(\n styles.phoneContactInput,\n disabled && styles.phoneContactInputDisabled,\n readOnly && styles.phoneContactInputReadonly\n )}\n />\n );\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={styles.contactSectionWrapper}\n >\n <div className={styles.contactInputSectionWrapper}>\n <div\n data-max-width={type === \"email\"}\n className={clsx(\n styles.contactInputWrapper,\n !!sendOtpError && styles.contactInputWrapperError,\n disabled && styles.contactInputWrapperDisabled,\n readOnly && styles.contactInputWrapperReadonly\n )}\n >\n {renderContactInput()}\n {isVerified && (\n <div\n className={styles.verifiedIconWrapper}\n aria-label=\"Verified\"\n role=\"img\"\n >\n <TickCircleFillIcon />\n </div>\n )}\n </div>\n {!disabled && !readOnly && (\n <Button\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 className={styles.contactButton}\n >\n {getContactButtonText()}\n </Button>\n )}\n </div>\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 </div>\n );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","className","styles.contactSectionWrapper","styles.contactInputSectionWrapper","children","clsx","styles.contactInputWrapper","styles.contactInputWrapperError","styles.contactInputWrapperDisabled","styles.contactInputWrapperReadonly","_jsx","InputGroup","placeholder","onChange","noBorder","concatIds","styles.emailContactInput","styles.emailContactInputDisabled","styles.emailContactInputReadonly","PhoneNumberInput","getAriaLabel","styles.phoneContactInput","styles.phoneContactInputDisabled","styles.phoneContactInputReadonly","styles.verifiedIconWrapper","role","TickCircleFillIcon","Button","onClick","isRunning","loading","styles.contactButton","FormErrorMessage"],"mappings":"udAemC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAiEvE,OACIC,EAAAA,YACIhC,GAAIA,EAAE,cACOC,EACbgC,UAAWC,EAAAA,gCAEXF,EAAAA,KAAA,MAAA,CAAKC,UAAWE,EAAAA,2BAAiCC,SAAA,CAC7CJ,EAAAA,KAAA,MAAA,CAAA,iBAC6B,UAAT3B,EAChB4B,UAAWI,EAAAA,QACPC,EAAAA,sBACErB,GAAgBsB,EAAAA,yBAClBrC,GAAYsC,EAAAA,4BACZrC,GAAYsC,EAAAA,6BACfL,SAAA,CAzEJ,UAAT/B,EACIqC,EAAAA,IAACC,EAAAA,YACG3C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,cACnCmB,MAAOlB,EACPsC,SAAUvB,EACVjB,KAAK,QACLyC,6BACgB7B,EAAY,iBACb,eACJ,yDAAwD,kBAClDC,EAAc,mBACb6B,EAAAA,UACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPW,EAAAA,kBACA9C,GAAY+C,EAAAA,0BACZ9C,GAAY+C,+BAIpBR,EAAAA,IAACS,EAAAA,iBAAgB,CACbnD,GAAII,gBAEAH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,sBACnCmB,MAAOhB,EACPoC,SAAUnB,EACVoB,UAAQ,EACRnC,aAAcA,mBACEM,EAAY,iBACb,EACfmC,aAAczB,oBACGT,EAAc,mBACb6B,YACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPgB,oBACAnD,GAAYoD,EAAAA,0BACZnD,GAAYoD,EAAAA,6BAyBX1C,GACG6B,EAAAA,IAAA,MAAA,CACIT,UAAWuB,EAAAA,oBAA0B,aAC1B,WACXC,KAAK,MAAKrB,SAEVM,EAAAA,IAACgB,EAAAA,mBAAkB,CAAA,SAI7BxD,IAAaC,GACXuC,EAAAA,IAACiB,EAAAA,QACGtD,KAAK,SAAQ,cAETJ,EACM,GAAGA,wBACHoB,EAEVuC,QAAS7C,EACTb,SAAUY,EAAU+C,WAAahD,EACjCiD,QAASlD,EACTqB,UAAW8B,EAAAA,cAAoB3B,SAzH3CvB,EACO,WAGPD,EACO,GAGPE,EAAU+C,UACH,WAGJ,gBAmHF5C,GACGyB,EAAAA,IAACsB,EAAAA,iBAAgB,CACbhE,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjDoC,KAAK,QAAOrB,SAEXnB,MAGP"}

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

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./contact-input-section.styles_odrjvt.css");exports.contactButton="c1l991bf",exports.contactInputSectionWrapper="c1ndevds",exports.contactInputWrapper="ce951ub",exports.contactInputWrapperDisabled="cjnw2dw",exports.contactInputWrapperError="c1q1uu2c",exports.contactInputWrapperReadonly="c1xm1ca3",exports.contactSectionWrapper="c1lwydna",exports.emailContactInput="e1ik236m",exports.emailContactInputDisabled="e19c6q61",exports.emailContactInputReadonly="ergya1n",exports.phoneContactInput="pqn3wrd",exports.phoneContactInputDisabled="p9yjg9s",exports.phoneContactInputReadonly="pg7qgn5",exports.verifiedIconWrapper="vf0c1ti";
2	+ //# sourceMappingURL=contact-input-section.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"contact-input-section.styles.js","sources":["../../../src/otp-verification/contact-input-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\nexport const contactSectionWrapper = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const contactInputSectionWrapper = css`\n display: flex;\n`;\n\nexport const contactInputWrapper = css`\n display: flex;\n align-items: center;\n padding: 0 ${Spacing[\"spacing-16\"]};\n border-radius: ${Radius[\"sm\"]} 0 0 ${Radius[\"sm\"]};\n box-shadow: inset 1px 0 0 ${Colour[\"border\"]},\n inset 0 1px 0 ${Colour[\"border\"]}, inset 0 -1px 0 ${Colour[\"border\"]};\n\n &:focus-within {\n box-shadow: inset 2px 0 0 ${Colour[\"border-focus\"]},\n inset 0 2px 0 ${Colour[\"border-focus\"]},\n inset 0 -2px 0 ${Colour[\"border-focus\"]};\n }\n\n &[data-max-width=\"true\"] {\n width: 100%;\n }\n`;\n\nexport const contactInputWrapperError = css`\n box-shadow: inset 1px 0 0 ${Colour[\"border-error\"]},\n inset 0 1px 0 ${Colour[\"border-error\"]},\n inset 0 -1px 0 ${Colour[\"border-error\"]};\n\n &:focus-within {\n box-shadow: inset 2px 0 0 ${Colour[\"border-error-focus\"]},\n inset 0 2px 0 ${Colour[\"border-error-focus\"]},\n inset 0 -2px 0 ${Colour[\"border-error-focus\"]};\n }\n`;\n\nexport const contactInputWrapperDisabled = css`\n box-shadow: inset 0 0 0 1px ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg-disabled\"]};\n color: ${Colour[\"text-disabled\"]};\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${Colour[\"border\"]};\n }\n\n &[data-max-width=\"false\"] {\n /* Spacer to maintain width when disabled */\n &::after {\n content: \"\";\n min-width: 120px;\n flex-shrink: 0;\n }\n\n /* Hide spacer on mobile to prevent text coverage */\n ${MediaQuery.MaxWidth.sm} {\n &::after {\n display: none;\n }\n }\n }\n`;\n\nexport const contactInputWrapperReadonly = css`\n padding-left: 0;\n box-shadow: none;\n border-radius: ${Radius[\"sm\"]};\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${Colour[\"border-focus\"]};\n }\n`;\n\nexport const verifiedIconWrapper = css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ${Spacing[\"spacing-12\"]};\n color: ${Colour[\"icon-success\"]};\n flex-shrink: 0;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n`;\n\nexport const contactButton = css`\n min-width: 120px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n flex-shrink: 0;\n\n ${MediaQuery.MaxWidth.sm} {\n width: fit-content;\n }\n`;\n\nexport const emailContactInput = css`\n padding: 0 ${Spacing[\"spacing-16\"]};\n width: 100%;\n background: transparent;\n`;\n\nexport const emailContactInputDisabled = css`\n input {\n color: ${Colour[\"text-disabled\"]};\n }\n`;\n\nexport const emailContactInputReadonly = css`\n padding: 0;\n`;\n\nexport const phoneContactInput = css`\n padding: 0 ${Spacing[\"spacing-16\"]};\n background: transparent;\n`;\n\nexport const phoneContactInputDisabled = css`\n input {\n color: ${Colour[\"text-disabled\"]};\n }\n`;\n\nexport const phoneContactInputReadonly = css`\n padding: 0;\n\n input {\n margin-left: ${Spacing[\"spacing-12\"]};\n }\n`;\n"],"names":[],"mappings":"wHA+F0B,8CAtFa,uCAIP,8CA+BQ,2CAZH,+CAuCG,yCAnEN,qCAsGJ,6CAMQ,6CAMA,oCAIR,4CAKQ,4CAMA,sCApDN"}

package/cjs/otp-verification/contact-input-section.styles_odrjvt.css ADDED Viewed

@@ -0,0 +1,14 @@
+.c1lwydna{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.c1ndevds{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.ce951ub{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 var(--fds-spacing-16);border-radius:var(--fds-radius-sm) 0 0 var(--fds-radius-sm);box-shadow:inset 1px 0 0 var(--fds-colour-border),inset 0 1px 0 var(--fds-colour-border),inset 0 -1px 0 var(--fds-colour-border);}.ce951ub:focus-within{box-shadow:inset 2px 0 0 var(--fds-colour-border-focus),inset 0 2px 0 var(--fds-colour-border-focus),inset 0 -2px 0 var(--fds-colour-border-focus);}.ce951ub[data-max-width="true"]{width:100%;}
+.c1q1uu2c{box-shadow:inset 1px 0 0 var(--fds-colour-border-error),inset 0 1px 0 var(--fds-colour-border-error),inset 0 -1px 0 var(--fds-colour-border-error);}.c1q1uu2c:focus-within{box-shadow:inset 2px 0 0 var(--fds-colour-border-error-focus),inset 0 2px 0 var(--fds-colour-border-error-focus),inset 0 -2px 0 var(--fds-colour-border-error-focus);}
+.cjnw2dw{box-shadow:inset 0 0 0 1px var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg-disabled);color:var(--fds-colour-text-disabled);}.cjnw2dw:focus-within{box-shadow:inset 0 0 0 2px var(--fds-colour-border);}.cjnw2dw[data-max-width="false"]::after{content:"";min-width:120px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .cjnw2dw[data-max-width="false"]::after{display:none;}
+.c1xm1ca3{padding-left:0;box-shadow:none;border-radius:var(--fds-radius-sm);}.c1xm1ca3:focus-within{box-shadow:inset 0 0 0 2px var(--fds-colour-border-focus);}
+.vf0c1ti{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-left:var(--fds-spacing-12);color:var(--fds-colour-icon-success);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.vf0c1ti svg{width:1.25rem;height:1.25rem;}
+.c1l991bf{min-width:120px;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .c1l991bf{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.e1ik236m{padding:0 var(--fds-spacing-16);width:100%;background:transparent;}
+.e19c6q61 input{color:var(--fds-colour-text-disabled);}
+.ergya1n{padding:0;}
+.pqn3wrd{padding:0 var(--fds-spacing-16);background:transparent;}
+.p9yjg9s input{color:var(--fds-colour-text-disabled);}
+.pg7qgn5{padding:0;}.pg7qgn5 input{margin-left:var(--fds-spacing-12);}

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

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

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

	@@ -1 +1 @@
1	- {"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~~"}
1	+ {"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport * as styles 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 \|\| isLoading) 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 \|\| isVerifyLoading \|\| !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 <div\n id={id}\n data-testid={dataTestId}\n className={clsx(styles.otpInputWrapper, className)}\n >\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 </div>\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","clsx","styles.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":"4kBAUgCA,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,OAAA,MAAA,CACI3B,GAAIA,gBACSC,EACbC,UAAW0B,UAAKC,EAAAA,gBAAwB3B,GAAU4B,SAAA,CAElDC,MAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAAA,EACZnC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBkC,EACpDrB,UAAWA,EACXsB,WAAyB,aAAbzB,EACZQ,UAAWA,EACXf,UAnEU,IAAWiC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,GAAKjC,IAAaU,EAElB,IACIC,GAAa,SACPX,IACNQ,EAAiB,QACjBO,EAAUmB,QACVnB,EAAUoB,OACd,CAAE,MAAAC,GAEF,SACIzB,GAAa,EACjB,CACJ,IAsDY0B,aAvBW,KACF,aAAb9B,GACAC,EAAiB,UACrB,EAqBQL,aAAcA,EACdmC,aACmB,iBAAf3C,EAAM4C,MAA0B5C,EAAM2C,gBAIhC,SAAb/B,GACGoB,EAAAA,IAACa,EAAAA,qCACO7C,EAAK,CAAA,cAELE,EAAa,GAAGA,sBAA4BkC,EAEhDU,QAASpC,eAAAA,EAAUqC,MACnBC,UAAWtC,aAAQ,EAARA,EAAUuC,OACrBC,aAAcxC,aAAQ,EAARA,EAAUyC,UACxBC,WAAYzC,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,YAtEQ,IAAWgC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAKhC,IAAeY,IAAoBR,aAAQ,EAARA,EAAUqC,OAElD,IACI5B,GAAmB,SACbb,EAAYI,EAASqC,OAE3BlC,EAAiB,YAEjBwC,EAAAA,eAAe,UACfC,EAAAA,SACI,0DACA,UAIJlC,EAAUmB,QACV5B,SAAAA,EAAc,GAClB,CAAE,MAAA8B,GAEF,SACItB,GAAmB,EACvB,CACJ,IAgDgBV,eAAgBA,OAGtB"}

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

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./otp-verification.styles_dg9bm8.css");exports.otpInputWrapper="o1jl65sy";
2	+ //# sourceMappingURL=otp-verification.styles.js.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"otp-verification.styles.js","sources":["../../../src/otp-verification/otp-verification.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\nexport const otpInputWrapper = css`\n display: flex;\n flex-direction: column;\n gap: ${Spacing[\"spacing-16\"]};\n`;\n"],"names":[],"mappings":"qHAI4B"}

package/cjs/otp-verification/otp-verification.styles_dg9bm8.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .o1jl65sy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-16);}