@connectid-tools/idp-selector-react 6.10.0-alpha.9 → 6.11.0-alpha.1

package/Benefits.d.ts

@@ -1,5 +1,5 @@
-import './Benefits.css';
-import { IntroTextType } from './types';
+import "./Benefits.css";
+import { IntroTextType } from "./types.js";
 export declare const Benefits: React.FC<{
     full: boolean;
     introTextType: IntroTextType;

package/Benefits.js

@@ -1,28 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import './Benefits.css';
-import { ThemeContext } from './ThemeContext';
+import { useContext } from "react";
+import "./Benefits.css";
+import { ThemeContext } from "./ThemeContext.js";
 export const Benefits = ({ full, introTextType }) => {
     const theme = useContext(ThemeContext);
     const defaultBenefits = [
         "Reduce the data you share online by only sharing what's required",
-        'ConnectID does not see or store your personal information',
+        "ConnectID does not see or store your personal information",
     ];
     const fullBenefits = [
-        'No banking information is shared',
-        'No document uploads',
-        'Details are only shared with your review and consent',
-        'Accredited by the Australian government as an identity exchange',
+        "No banking information is shared",
+        "No document uploads",
+        "Details are only shared with your review and consent",
+        "Accredited by the Australian government as an identity exchange",
     ];
     const fullBenefitsBankDetails = [
         "ConnectID doesn't see or store your information",
-        'No document uploads',
-        'Details are only shared with your review and consent',
-        'Accredited by the Australian government as an identity exchange',
+        "No document uploads",
+        "Details are only shared with your review and consent",
+        "Accredited by the Australian government as an identity exchange",
     ];
-    const bankDetailsIntroTextTypes = ['bank-details-plus-personal-info', 'bank-details-only'];
+    const bankDetailsIntroTextTypes = ["bank-details-plus-personal-info", "bank-details-only"];
     const adjustedFullBenefits = bankDetailsIntroTextTypes.includes(introTextType) ? fullBenefitsBankDetails : fullBenefits;
-    const listItemClasses = `cid-idp-selector-benefit ${theme === 'light' ? 'cid-idp-selector-benefit--light' : ''}`;
+    const listItemClasses = `cid-idp-selector-benefit ${theme === "light" ? "cid-idp-selector-benefit--light" : ""}`;
     const benefits = full ? adjustedFullBenefits : defaultBenefits;
-    return (_jsx("ul", { className: `cid-idp-selector-benefits ${full ? 'cid-idp-selector-benefits--box' : ''} ${theme === 'light' ? 'cid-idp-selector-benefits--light' : ''}`, "data-testid": "benefits", children: benefits.map((benefit) => (_jsxs("li", { className: listItemClasses, "data-testid": "benefit-item", children: [_jsx("svg", { className: "cid-idp-selector-benefit-icon", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.28025 8.71975L14.25 1.75L15.3105 2.8105L7.28025 10.8407L3 6.5605L4.0605 5.5L7.28025 8.71975Z" }) }), benefit] }, benefit))) }));
+    return (_jsx("ul", { className: `cid-idp-selector-benefits ${full ? "cid-idp-selector-benefits--box" : ""} ${theme === "light" ? "cid-idp-selector-benefits--light" : ""}`, "data-testid": "benefits", children: benefits.map((benefit) => (_jsxs("li", { className: listItemClasses, "data-testid": "benefit-item", children: [_jsx("svg", { className: "cid-idp-selector-benefit-icon", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.28025 8.71975L14.25 1.75L15.3105 2.8105L7.28025 10.8407L3 6.5605L4.0605 5.5L7.28025 8.71975Z" }) }), benefit] }, benefit))) }));
 };

package/CidButton.css

@@ -14,6 +14,11 @@
   background-color: #262626;
   color: white;
 }
+.cid-idp-selector-button:focus-visible {
+  outline: 3px solid #1a73e8;
+  box-shadow: 0 0 0 6px white;
+  outline-offset: 0.2rem;
+}
 /* so we do not break current cid buttons */
 .cid-idp-selector-button--type {
   width: 100%;

package/CidButton.d.ts

@@ -1,6 +1,6 @@
-import './CidButton.css';
-import './global.css';
-import { Browser, CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompatibilityWarnings, IntroTextType, LogoMode, RequiredCertification } from './types';
+import "./CidButton.css";
+import "./global.css";
+import { Browser, CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompatibilityWarnings, IntroTextType, LogoMode, RequiredCertification } from "./types.js";
 type CidButtonProps = {
     onProceed: (authorisationServerId: string, compatibilityWarnings: CompatibilityWarnings) => void;
     claims: Claim[];

package/CidButton.js

@@ -1,36 +1,46 @@
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import useSWR from 'swr';
-import { Benefits } from './Benefits';
-import './CidButton.css';
-import { CidButtonHowItWorks } from './CidButtonHowItWorks';
-import { CidButtonInfo } from './CidButtonInfo';
-import { FullProcess } from './FullProcess';
-import { IdpLogoList } from './IdpLogoList';
-import { IntroText } from './IntroText';
-import { LearnMore } from './LearnMore';
-import { Overlay } from './Overlay';
-import { Popup } from './Popup';
-import { Process } from './Process';
-import { ThemeContext } from './ThemeContext';
-import { initialiseAnalytics } from './analytics';
-import './global.css';
-import { getCurrentUrlOrigin } from './navigator';
-import { isIntroTextTypeValid, isRequiredClaimsValid } from './validator';
-import detectIncognito from './incognito';
-import { getBrowserName, getDeviceType, isAndroid, isIos } from './userAgent';
-import { hasCertification } from './certification';
-import { getCompatibility } from './compatibility';
-export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requiredCertifications, label = 'Verify', size = 'regular', type, introTextType, fullProcessCollapsible = false, participantsUri = 'https://data.directory.connectid.com.au/participants', certificationStatus = 'Active', rpDataSharingDescription = 'Your details will be shared with the current website.', enableManualVerification = false, showAllParticipants = false, theme = 'dark', logoLockupStyle = 'light', showInfoContent = false, onError = () => { }, showCompatibilityWarnings = false, supportIncognito = false, disableAnalytics = false, forceMobile = false, // only for testing purposes
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+import { Benefits } from "./Benefits.js";
+import "./CidButton.css";
+import { CidButtonHowItWorks } from "./CidButtonHowItWorks.js";
+import { CidButtonInfo } from "./CidButtonInfo.js";
+import { FullProcess } from "./FullProcess.js";
+import { IdpLogoList } from "./IdpLogoList.js";
+import { IntroText } from "./IntroText.js";
+import { LearnMore } from "./LearnMore.js";
+import { Overlay } from "./Overlay.js";
+import { Popup } from "./Popup.js";
+import { Process } from "./Process.js";
+import { ThemeContext } from "./ThemeContext.js";
+import { initialiseAnalytics } from "./analytics.js";
+import "./global.css";
+import { getCurrentUrlOrigin } from "./navigator.js";
+import { isIntroTextTypeValid, isRequiredClaimsValid } from "./validator.js";
+import detectIncognito from "./incognito.js";
+import { getBrowserName, getDeviceType, isAndroid, isIos } from "./userAgent.js";
+import { hasCertification } from "./certification.js";
+import { getCompatibility } from "./compatibility.js";
+export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requiredCertifications, label = "Verify", size = "regular", type, introTextType, fullProcessCollapsible = false, participantsUri = "https://data.directory.connectid.com.au/participants", certificationStatus = "Active", rpDataSharingDescription = "Your details will be shared with the current website.", enableManualVerification = false, showAllParticipants = false, theme = "dark", logoLockupStyle = "light", showInfoContent = false, onError = () => { }, showCompatibilityWarnings = false, supportIncognito = false, disableAnalytics = false, forceMobile = false, // only for testing purposes
 forceIos = false, // only for testing purposes
 forceAndroid = false, // only for testing purposes
 forceIncognito = false, // only for testing purposes
@@ -44,6 +54,7 @@ forceBrowser = undefined, // only for testing purposes
     }));
     const [showPopup, setShowPopup] = useState(false);
     const [isIncognito, setIsIncognito] = useState();
+    const [authorisationServersThatDisplayedCompatibilityPopup, setAuthorisationServersThatDisplayedCompatibilityPopup] = useState([]);
     const analyticsData = {
         claims,
         rpLogoUrl,
@@ -70,7 +81,7 @@ forceBrowser = undefined, // only for testing purposes
             hasHowItWorks: true,
             hasLearnMore: false,
         },
-        'medium benefits': {
+        "medium benefits": {
             hasIntro: true,
             hasBenefits: true,
             hasProcess: false,
@@ -78,7 +89,7 @@ forceBrowser = undefined, // only for testing purposes
             hasHowItWorks: true,
             hasLearnMore: false,
         },
-        'medium process': {
+        "medium process": {
             hasIntro: true,
             hasBenefits: false,
             hasProcess: true,
@@ -86,7 +97,7 @@ forceBrowser = undefined, // only for testing purposes
             hasHowItWorks: false,
             hasLearnMore: true,
         },
-        'full benefits': {
+        "full benefits": {
             hasIntro: true,
             hasBenefits: true,
             hasProcess: false,
@@ -94,7 +105,7 @@ forceBrowser = undefined, // only for testing purposes
             hasHowItWorks: true,
             hasLearnMore: false,
         },
-        'full process': {
+        "full process": {
             hasIntro: true,
             hasBenefits: false,
             hasProcess: true,
@@ -116,8 +127,8 @@ forceBrowser = undefined, // only for testing purposes
                 incognito = undefined;
             }
             initialiseAnalytics((analytics) => {
-                if (typeof analytics !== 'undefined') {
-                    analytics.track('ConnectID Button Displayed', Object.assign(Object.assign({}, analyticsData), { incognito }));
+                if (typeof analytics !== "undefined") {
+                    analytics.track("ConnectID Button Displayed", Object.assign(Object.assign({}, analyticsData), { incognito }));
                 }
             });
         });
@@ -125,19 +136,19 @@ forceBrowser = undefined, // only for testing purposes
             return;
         track();
     }, []);
-    const getCompatibilityConfirmText = (compatibilityWarnings) => {
-        if (compatibilityWarnings.mobileOs === 'android' && compatibilityWarnings.browser === 'samsung') {
-            return 'It looks like you are using Samsung Browser. This generally will not work - we suggest using Chrome and trying again.\nClick on "Cancel" to abort or "OK" to proceed.';
+    const getCompatibilityPopupText = (compatibilityWarnings) => {
+        if (compatibilityWarnings.mobileOs === "android" && compatibilityWarnings.browser === "samsung") {
+            return "We couldn't open your identity provider's app. Samsung Internet doesn't support this step. To continue verifying your identity, please switch to a different browser.";
         }
-        return 'It looks like you are in incognito mode. This generally will not work - we suggest switching out of incognito mode and trying again.\nClick on "Cancel" to abort or "OK" to proceed.';
+        return "Looks like you're in incognito mode.\nWe can't complete verification using this identity provider while private browsing is on. To continue, please open a regular browser window and try again.";
     };
     const handleOnProceed = (authorisationServerId, authorisationServerName, authorisationServerCertifications) => {
-        if (typeof analytics !== 'undefined') {
-            analytics.track('IDP Selected', Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName, incognito: isIncognito }));
+        if (typeof analytics !== "undefined") {
+            analytics.track("IDP Selected", Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName, incognito: isIncognito }));
         }
         setShowPopup(false);
-        const isMobile = forceMobile || getDeviceType() === 'mobile';
-        const idpHasAppCertification = hasCertification(authorisationServerCertifications, 'Channel', 'app');
+        const isMobile = forceMobile || getDeviceType() === "mobile";
+        const idpHasAppCertification = hasCertification(authorisationServerCertifications, "Channel", "app");
         const compatibility = getCompatibility({
             supportIncognito,
             idpHasAppCertification,
@@ -147,50 +158,48 @@ forceBrowser = undefined, // only for testing purposes
             isIos: forceIos || isIos(),
             browser: forceBrowser || getBrowserName(),
         });
-        if (showCompatibilityWarnings && compatibility.mightFail) {
-            const confirmText = getCompatibilityConfirmText(compatibility);
-            if (confirm(confirmText)) {
-                onProceed(authorisationServerId, compatibility);
-            }
-            else {
-                setShowPopup(true);
-            }
+        const authorisationServerHasNotDisplayedCompatibilityPopup = authorisationServersThatDisplayedCompatibilityPopup.find(authServerId => authServerId === authorisationServerId) === undefined;
+        if (showCompatibilityWarnings && compatibility.mightFail && authorisationServerHasNotDisplayedCompatibilityPopup) {
+            const popupText = getCompatibilityPopupText(compatibility);
+            alert(popupText);
+            setShowPopup(true);
+            setAuthorisationServersThatDisplayedCompatibilityPopup([...authorisationServersThatDisplayedCompatibilityPopup, authorisationServerId]);
             return;
         }
         onProceed(authorisationServerId, compatibility);
     };
     const handleButtonClick = () => {
         setShowPopup(true);
-        if (typeof analytics !== 'undefined') {
-            analytics.track('ConnectID Button Clicked', Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
+        if (typeof analytics !== "undefined") {
+            analytics.track("ConnectID Button Clicked", Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
         }
     };
     const handleClosePopup = () => {
         setShowPopup(false);
-        if (typeof analytics !== 'undefined') {
-            analytics.track('IDP Selector Popup Close Button Clicked', Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
+        if (typeof analytics !== "undefined") {
+            analytics.track("IDP Selector Popup Close Button Clicked", Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
         }
     };
     if (!isRequiredClaimsValid(claims, requiredClaims)) {
-        const errorMessage = `requiredClaims needs to be a subset of claims. claims: ${claims.join(', ')}; requiredClaims: ${requiredClaims === null || requiredClaims === void 0 ? void 0 : requiredClaims.join(', ')}.`;
+        const errorMessage = `requiredClaims needs to be a subset of claims. claims: ${claims.join(", ")}; requiredClaims: ${requiredClaims === null || requiredClaims === void 0 ? void 0 : requiredClaims.join(", ")}.`;
         console.log(errorMessage);
         onError(errorMessage);
         return null;
     }
     if (!isIntroTextTypeValid(type, introTextType)) {
-        const errorMessage = 'introTextType is required when type is defined.';
+        const errorMessage = "introTextType is required when type is defined.";
         console.log(errorMessage);
         onError(errorMessage);
         return null;
     }
     const ctaText = `${label} with ConnectID`;
     const connectIdButtonTypeConfig = type ? typeConfigMap[type] : undefined;
-    return (_jsxs(ThemeContext.Provider, { value: theme, children: [showPopup && (_jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: handleClosePopup }), _jsx(Popup, { onProceed: handleOnProceed, onCancel: handleClosePopup, onError: onError, certificationStatus: certificationStatus, popupTitle: ctaText, requiredCertifications: requiredCertifications, rpLogoUrl: rpLogoUrl, rpDataSharingDescription: rpDataSharingDescription, claims: claims, requiredClaims: requiredClaims, enableManualVerification: enableManualVerification, showAllParticipants: showAllParticipants, participants: participants, error: error, isLoading: isLoading })] })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasIntro) && introTextType && _jsx(IntroText, { type: introTextType }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasBenefits) && (_jsx(Benefits, { full: type === 'full benefits', introTextType: introTextType || 'verify-trust' })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasProcess) &&
-                (type === 'full process' ? _jsx(FullProcess, { collapsible: fullProcessCollapsible }) : _jsx(Process, {})), _jsxs("button", { className: `
+    return (_jsxs(ThemeContext.Provider, { value: theme, children: [showPopup && (_jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: handleClosePopup }), _jsx(Popup, { onProceed: handleOnProceed, onCancel: handleClosePopup, onError: onError, certificationStatus: certificationStatus, popupTitle: ctaText, requiredCertifications: requiredCertifications, rpLogoUrl: rpLogoUrl, rpDataSharingDescription: rpDataSharingDescription, claims: claims, requiredClaims: requiredClaims, enableManualVerification: enableManualVerification, showAllParticipants: showAllParticipants, participants: participants, error: error, isLoading: isLoading })] })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasIntro) && introTextType && _jsx(IntroText, { type: introTextType }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasBenefits) && (_jsx(Benefits, { full: type === "full benefits", introTextType: introTextType || "verify-trust" })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasProcess) &&
+                (type === "full process" ? _jsx(FullProcess, { collapsible: fullProcessCollapsible }) : _jsx(Process, {})), _jsxs("button", { className: `
           cid-idp-selector-button cid-idp-selector-button--${theme} 
-          ${size === 'large' ? 'cid-idp-selector-button--large' : ''} 
-          ${type || showInfoContent ? 'cid-idp-selector-button--type' : ''}
+          ${size === "large" ? "cid-idp-selector-button--large" : ""} 
+          ${type || showInfoContent ? "cid-idp-selector-button--type" : ""}
         `, onClick: handleButtonClick, type: "button", "data-testid": "cid-idp-selector-button", children: [_jsx("svg", { className: "cid-idp-selector-button-icon", viewBox: "0 0 132.37 157.84", children: _jsx("path", { d: "M102.22,91.65c0,19.9-16.13,36.03-36.03,36.03s-36.03-16.13-36.03-36.03,16.13-36.03,36.03-36.03c9.95,0,18.96,4.03,25.48,10.55l40.71-40.71c-6.52-6.52-10.55-15.52-10.55-25.46h-30.14c0,13.45,4.02,25.95,10.92,36.39-10.45-6.9-22.96-10.93-36.42-10.93C29.63,25.47,0,55.1,0,91.65s29.63,66.19,66.19,66.19,66.19-29.63,66.19-66.19h-30.16Z" }) }), ctaText] }), showInfoContent && (_jsxs("div", { className: "cid-show-info-content", "data-testid": "cid-show-info-content", children: [!error && _jsx(IdpLogoList, { loading: isLoading, logoLockupStyle: logoLockupStyle }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasInfo) &&
-                        introTextType !== 'bank-details-plus-personal-info' &&
-                        introTextType !== 'bank-details-only' && _jsx(CidButtonInfo, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasHowItWorks) && _jsx(CidButtonHowItWorks, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasLearnMore) && _jsx(LearnMore, {})] }))] }));
+                        introTextType !== "bank-details-plus-personal-info" &&
+                        introTextType !== "bank-details-only" && _jsx(CidButtonInfo, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasHowItWorks) && _jsx(CidButtonHowItWorks, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasLearnMore) && _jsx(LearnMore, {})] }))] }));
 };

package/CidButtonHowItWorks.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getCurrentUrlOrigin } from './navigator';
-import './CidButtonHowItWorks.css';
-import { ThemeContext } from './ThemeContext';
-import { useContext } from 'react';
+import { getCurrentUrlOrigin } from "./navigator.js";
+import "./CidButtonHowItWorks.css";
+import { ThemeContext } from "./ThemeContext.js";
+import { useContext } from "react";
 export const CidButtonHowItWorks = () => {
     const theme = useContext(ThemeContext);
     const handleClick = () => {
-        if (typeof analytics !== 'undefined') {
-            analytics.track('Link to External Page Clicked', {
-                source: 'how_does_it_work',
-                link_url: 'https://connectid.com.au/#use-cases',
+        if (typeof analytics !== "undefined") {
+            analytics.track("Link to External Page Clicked", {
+                source: "how_does_it_work",
+                link_url: "https://connectid.com.au/#use-cases",
                 rp_sub_brand: getCurrentUrlOrigin(),
             });
         }
     };
-    return (_jsx("a", { href: "https://connectid.com.au/#use-cases", onClick: handleClick, target: "_blank", tabIndex: 0, className: `cid-idp-selector-how-it-works ${theme === 'light' ? 'cid-idp-selector-how-it-works--light' : ''}`, "data-testid": "how-it-works", children: "How does it work?" }));
+    return (_jsx("a", { href: "https://connectid.com.au/#use-cases", onClick: handleClick, target: "_blank", tabIndex: 0, className: `cid-idp-selector-how-it-works ${theme === "light" ? "cid-idp-selector-how-it-works--light" : ""}`, "data-testid": "how-it-works", children: "How does it work?" }));
 };

package/CidButtonInfo.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './CidButtonInfo.css';
-import { ThemeContext } from './ThemeContext';
-import { useContext } from 'react';
+import "./CidButtonInfo.css";
+import { ThemeContext } from "./ThemeContext.js";
+import { useContext } from "react";
 export const CidButtonInfo = () => {
     const theme = useContext(ThemeContext);
-    return (_jsxs("div", { className: `cid-idp-selector-button-info ${theme === 'light' ? 'cid-idp-selector-button-info--light' : ''}`, "data-testid": "button-info", children: [_jsxs("svg", { className: "cid-idp-selector-button-info-icon", width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M6.53509 12.3572C9.59207 12.3572 12.0702 9.81483 12.0702 6.67859C12.0702 3.54239 9.59207 1 6.53509 1C3.47814 1 1 3.54239 1 6.67859C1 9.81483 3.47814 12.3572 6.53509 12.3572Z", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.25781 9.29883H7.81247", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 4.49472C6.7703 4.49472 6.96093 4.29915 6.96093 4.05791C6.96093 3.81666 6.7703 3.62109 6.53515 3.62109C6.3 3.62109 6.10938 3.81666 6.10938 4.05791C6.10938 4.29915 6.3 4.49472 6.53515 4.49472Z", fill: "#262626", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 9.29989V6.24219H5.68359", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" })] }), "No banking or financial information is shared"] }));
+    return (_jsxs("div", { className: `cid-idp-selector-button-info ${theme === "light" ? "cid-idp-selector-button-info--light" : ""}`, "data-testid": "button-info", children: [_jsxs("svg", { className: "cid-idp-selector-button-info-icon", width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M6.53509 12.3572C9.59207 12.3572 12.0702 9.81483 12.0702 6.67859C12.0702 3.54239 9.59207 1 6.53509 1C3.47814 1 1 3.54239 1 6.67859C1 9.81483 3.47814 12.3572 6.53509 12.3572Z", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.25781 9.29883H7.81247", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 4.49472C6.7703 4.49472 6.96093 4.29915 6.96093 4.05791C6.96093 3.81666 6.7703 3.62109 6.53515 3.62109C6.3 3.62109 6.10938 3.81666 6.10938 4.05791C6.10938 4.29915 6.3 4.49472 6.53515 4.49472Z", fill: "#262626", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 9.29989V6.24219H5.68359", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" })] }), "No banking or financial information is shared"] }));
 };

package/FullProcess.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
-import { ThemeContext } from './ThemeContext';
-import './FullProcess.css';
+import { useContext, useState } from "react";
+import { ThemeContext } from "./ThemeContext.js";
+import "./FullProcess.css";
 // on a wide screen the layout is like this
 // .----------.----------.
 // text       text       text
@@ -31,5 +31,5 @@ export const FullProcess = ({ collapsible = false }) => {
             return true;
         }
     };
-    return (_jsxs("div", { className: `cid-idp-selector-full-process ${theme === 'light' ? 'cid-idp-selector-full-process--light' : ''} ${open ? 'cid-idp-selector-full-process--open' : ''} ${colorChanged() ? 'open' : 'close'} ${theme === 'light' ? 'light' : ''}`, "data-testid": "full-process", children: [_jsxs("h3", { className: "cid-idp-selector-full-process-title", children: ["How it works", collapsible && (_jsx("svg", { className: "cid-idp-selector-full-process-toggle", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: handleToggle, "data-testid": "full-process-toggle", children: _jsx("path", { d: "M13.1684 5.3125L13.8125 5.9998L8.5 11.6875L3.1875 5.9998L3.82832 5.3125L8.5 10.3096L13.1684 5.3125Z" }) }))] }), _jsxs("div", { className: "cid-idp-selector-full-process-grid", "data-testid": "full-process-grid", children: [_jsxs("div", { className: "cid-idp-selector-full-process-step", children: [_jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }), _jsx("div", { className: "cid-idp-selector-full-process-line" })] }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Select your trusted organisation" }), _jsxs("div", { className: "cid-idp-selector-full-process-step", children: [_jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }), _jsx("div", { className: "cid-idp-selector-full-process-line" })] }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Log in to your existing account" }), _jsx("div", { className: "cid-idp-selector-full-process-step", children: _jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }) }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Review your details and provide consent" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Select your trusted organisation" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Log in to your existing account" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Review your details and provide consent" })] })] }));
+    return (_jsxs("div", { className: `cid-idp-selector-full-process ${theme === "light" ? "cid-idp-selector-full-process--light" : ""} ${open ? "cid-idp-selector-full-process--open" : ""} ${colorChanged() ? "open" : "close"} ${theme === "light" ? "light" : ""}`, "data-testid": "full-process", children: [_jsxs("h3", { className: "cid-idp-selector-full-process-title", children: ["How it works", collapsible && (_jsx("svg", { className: "cid-idp-selector-full-process-toggle", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: handleToggle, "data-testid": "full-process-toggle", children: _jsx("path", { d: "M13.1684 5.3125L13.8125 5.9998L8.5 11.6875L3.1875 5.9998L3.82832 5.3125L8.5 10.3096L13.1684 5.3125Z" }) }))] }), _jsxs("div", { className: "cid-idp-selector-full-process-grid", "data-testid": "full-process-grid", children: [_jsxs("div", { className: "cid-idp-selector-full-process-step", children: [_jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }), _jsx("div", { className: "cid-idp-selector-full-process-line" })] }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Select your trusted organisation" }), _jsxs("div", { className: "cid-idp-selector-full-process-step", children: [_jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }), _jsx("div", { className: "cid-idp-selector-full-process-line" })] }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Log in to your existing account" }), _jsx("div", { className: "cid-idp-selector-full-process-step", children: _jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }) }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Review your details and provide consent" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Select your trusted organisation" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Log in to your existing account" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Review your details and provide consent" })] })] }));
 };

package/IdpLogoList.css

@@ -2,52 +2,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
   gap: 8px;
-  margin-top: 6px;
-  margin-bottom: 12px;
+  margin-top: 10px;
+  margin-bottom: 16px;
 }
-.cid-idp-selector-idp-logo-list-title {
-  font-size: 12px;
-  color: var(--charcoal75);
+.cid-idp-selector-idp-logo-list-label {
+  font-size: 13px;
+  color: var(--charcoal);
 }
-.cid-idp-selector-idp-logo-list-title.cid-idp-selector-idp-logo-list-title--light {
+.cid-idp-selector-idp-logo-list-label--dark {
   color: white;
 }
-.cid-idp-selector-idp-logo-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
 .cid-idp-selector-idp-logo-list-logo {
-  width: 24px;
-  height: 24px;
-  border-radius: 2px;
+  height: 30px;
 }
 .cid-idp-selector-idp-logo-list-skeleton-wrapper {
   margin-top: 20px;
   display: flex;
   justify-content: center;
 }
-.cid-logo-lockup {
-  width: 264px;
-  height: 53.18px;
-}
-@media (max-width: 1440px) {
- .cid-logo-lockup {
-    width: 234px;
-    height: 47px;
-  }
-} 
-@media (max-width: 430px) {
-  .cid-logo-lockup {
-     width: 233.78px;
-     height: 45px;
-   }
- } 
- @media (max-width: 375px) {
-  .cid-logo-lockup {
-     width: 213px;
-     height: 41px;
-   }
- } 

package/IdpLogoList.d.ts

@@ -1,5 +1,5 @@
-import './IdpLogoList.css';
-import { LogoMode } from './types';
+import "./IdpLogoList.css";
+import { LogoMode } from "./types.js";
 type IdpLogoListProps = {
     loading: boolean;
     logoLockupStyle?: LogoMode;

package/IdpLogoList.js

@@ -1,16 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import './IdpLogoList.css';
-import { Skeleton } from './Skeleton';
-const logoLockupUrl = {
-    dark: 'https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-dark.svg',
-    light: 'https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-light.svg',
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./IdpLogoList.css";
+import { Skeleton } from "./Skeleton.js";
 export const IdpLogoList = ({ loading, logoLockupStyle }) => {
     if (loading) {
-        return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "24px", width: "120px", dataTestId: "idp-logo-list-loading" }) }));
+        return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "25px", width: "203px", dataTestId: "idp-logo-list-loading" }) }));
     }
-    const isDarkMode = logoLockupStyle === 'dark';
-    const imgSrc = isDarkMode ? logoLockupUrl.dark : logoLockupUrl.light;
-    const dataTestId = isDarkMode ? 'logo-lockup-dark' : 'logo-lockup-light';
-    return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: _jsx("img", { "data-testid": dataTestId, className: "cid-logo-lockup", src: imgSrc, alt: "Available on: CommBank, NAB, ANZ Plus and Westpac" }) }));
+    const isDarkMode = logoLockupStyle === "dark";
+    const imgSrc = `https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-${isDarkMode ? "dark" : "light"}2.svg`;
+    const dataTestId = `idp-logo-lockup-${isDarkMode ? "dark" : "light"}`;
+    return (_jsxs("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: [_jsx("span", { className: `cid-idp-selector-idp-logo-list-label ${isDarkMode ? "cid-idp-selector-idp-logo-list-label--dark" : ""}`, "data-testid": "idp-logo-list-label", children: "Available on" }), _jsx("img", { "data-testid": dataTestId, className: "cid-idp-selector-idp-logo-list-logo", src: imgSrc, alt: "CommBank, NAB, ANZ Plus and Westpac" })] }));
 };

package/IntroText.d.ts

@@ -1,5 +1,5 @@
-import { IntroTextType } from './types';
-import './IntroText.css';
+import { IntroTextType } from "./types.js";
+import "./IntroText.css";
 export declare const IntroText: React.FC<{
     type: IntroTextType;
 }>;

package/IntroText.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import './IntroText.css';
-import { useContext } from 'react';
-import { ThemeContext } from './ThemeContext';
+import "./IntroText.css";
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeContext.js";
 const introTextContent = {
-    'verify-trust': 'ConnectID lets you verify your identity through details stored with an organisation you already trust, like your bank.',
-    'verify-account': 'Verify your identity through an organisation you already have an account with, like your bank.',
-    power: 'ConnectID gives you the power to choose how you share your details, using organisations you already trust.',
-    'sign-up': 'ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.',
-    'bank-details-plus-personal-info': 'Provide your preferred bank account and personal details in a secure and simple way, without oversharing information.',
-    'bank-details-only': 'Provide your preferred bank account details in a secure and simple way, without oversharing information.',
-    'verify-age': 'Verify your age through an organisation you already have an account with, like your bank.',
+    "verify-trust": "ConnectID lets you verify your identity through details stored with an organisation you already trust, like your bank.",
+    "verify-account": "Verify your identity through an organisation you already have an account with, like your bank.",
+    power: "ConnectID gives you the power to choose how you share your details, using organisations you already trust.",
+    "sign-up": "ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.",
+    "bank-details-plus-personal-info": "Provide your preferred bank account and personal details in a secure and simple way, without oversharing information.",
+    "bank-details-only": "Provide your preferred bank account details in a secure and simple way, without oversharing information.",
+    "verify-age": "Verify your age through an organisation you already have an account with, like your bank.",
 };
 export const IntroText = ({ type }) => {
     const theme = useContext(ThemeContext);
-    return (_jsx("div", { className: `cid-idp-selector-intro-text ${theme === 'light' ? 'cid-idp-selector-intro-text--light' : ''}`, "data-testid": "intro-text", children: introTextContent[type] }));
+    return (_jsx("div", { className: `cid-idp-selector-intro-text ${theme === "light" ? "cid-idp-selector-intro-text--light" : ""}`, "data-testid": "intro-text", children: introTextContent[type] }));
 };

package/LearnMore.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import './LearnMore.css';
-import { ThemeContext } from './ThemeContext';
-import { getCurrentUrlOrigin } from './navigator';
+import { useContext } from "react";
+import "./LearnMore.css";
+import { ThemeContext } from "./ThemeContext.js";
+import { getCurrentUrlOrigin } from "./navigator.js";
 export const LearnMore = () => {
     const theme = useContext(ThemeContext);
     const handleClick = () => {
-        if (typeof analytics !== 'undefined') {
-            analytics.track('Link to External Page Clicked', {
-                source: 'learn_more',
-                link_url: 'https://www.connectid.com.au',
+        if (typeof analytics !== "undefined") {
+            analytics.track("Link to External Page Clicked", {
+                source: "learn_more",
+                link_url: "https://www.connectid.com.au",
                 rp_sub_brand: getCurrentUrlOrigin(),
             });
         }
     };
-    return (_jsxs("div", { className: `cid-idp-selector-learn-more ${theme === 'light' ? 'cid-idp-selector-learn-more--light' : ''}`, children: ["Visit", ' ', _jsx("a", { href: "https://www.connectid.com.au", onClick: handleClick, target: "_blank", tabIndex: 0, "data-testid": "learn-more", children: "connectid.com.au" }), ' ', "to learn more."] }));
+    return (_jsxs("div", { className: `cid-idp-selector-learn-more ${theme === "light" ? "cid-idp-selector-learn-more--light" : ""}`, children: ["Visit", " ", _jsx("a", { href: "https://www.connectid.com.au", onClick: handleClick, target: "_blank", tabIndex: 0, "data-testid": "learn-more", children: "connectid.com.au" }), " ", "to learn more."] }));
 };

package/NoIdpError.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { InfoBox } from './InfoBox';
+import { useEffect, useState } from "react";
+import { InfoBox } from "./InfoBox.js";
 export const NoIdpError = ({ hasManualIdp, dataTestId }) => {
     // This is only to trigger the alert on screen readers
     // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
@@ -8,5 +8,5 @@ export const NoIdpError = ({ hasManualIdp, dataTestId }) => {
     useEffect(() => {
         setDisplayed(true);
     }, []);
-    return (_jsx(InfoBox, { type: "warning", dataTestId: dataTestId, role: "alert", children: isDisplayed && (_jsxs(_Fragment, { children: [_jsx("h4", { className: "cid-idp-selector-popup-info-box-title", children: "We weren't able to load Identity Providers." }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", children: ["Come back to us later", hasManualIdp && ' or enter details manually instead', "."] })] })) }));
+    return (_jsx(InfoBox, { type: "warning", dataTestId: dataTestId, role: "alert", children: isDisplayed && (_jsxs(_Fragment, { children: [_jsx("h4", { className: "cid-idp-selector-popup-info-box-title", children: "We weren't able to load Identity Providers." }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", children: ["Come back to us later", hasManualIdp && " or enter details manually instead", "."] })] })) }));
 };

package/Popup.d.ts

@@ -1,6 +1,6 @@
-import './global.css';
-import './Popup.css';
-import { AuthorisationServerCertification, CertificationStatus, Claim, Participant, RequiredCertification } from './types';
+import "./global.css";
+import "./Popup.css";
+import { AuthorisationServerCertification, CertificationStatus, Claim, Participant, RequiredCertification } from "./types.js";
 type PopupProps = {
     onProceed: (authorisationServerId: string, authorisationServerName: string, authorisationServerCertifications: AuthorisationServerCertification[]) => void;
     onCancel: () => void;