@connectid-tools/idp-selector-react 6.4.1

package/Benefits.css

@@ -0,0 +1,48 @@
+.cid-idp-selector-benefits {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 20px;
+  list-style: none;
+}
+.cid-idp-selector-benefits--box {
+  padding: 22px 14px;
+  border-radius: 16px;
+  border: 1px solid var(--charcoal);
+  background-color: white;
+}
+.cid-idp-selector-benefits--box.cid-idp-selector-benefits--light {
+  border: 1px solid white;
+  background-color: transparent;
+}
+.cid-idp-selector-benefit {
+  display: flex;
+  align-items: flex-start;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--charcoal);
+}
+.cid-idp-selector-benefit.cid-idp-selector-benefit--light {
+  color: white;
+}
+.cid-idp-selector-benefit-icon {
+  margin-right: 8px;
+  top: 2.5px;
+  position: relative;
+  flex-shrink: 0;
+}
+.cid-idp-selector-benefit-icon path {
+  fill: var(--charcoal);
+}
+.cid-idp-selector-benefit.cid-idp-selector-benefit--light .cid-idp-selector-benefit-icon path {
+  fill: white;
+}
+
+@media (max-width: 744px) {
+  .cid-idp-selector-benefit {
+    font-size: 14px;
+    line-height: 18px;
+  }
+}

package/Benefits.d.ts

@@ -0,0 +1,4 @@
+import './Benefits.css';
+export declare const Benefits: React.FC<{
+    full: boolean;
+}>;

package/Benefits.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import './Benefits.css';
+import { ThemeContext } from './ThemeContext';
+export const Benefits = ({ full }) => {
+    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',
+    ];
+    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',
+    ];
+    const listItemClasses = `cid-idp-selector-benefit ${theme === 'light' ? 'cid-idp-selector-benefit--light' : ''}`;
+    const benefits = full ? fullBenefits : 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] }))) }));
+};

package/CidButton.css

@@ -0,0 +1,57 @@
+.cid-idp-selector-button {
+  min-width: 311px;
+  border-radius: 12px;
+  padding: 13px 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: var(--font);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  border: 1px solid #262626;
+  background-color: #262626;
+  color: white;
+}
+/* so we do not break current cid buttons */
+.cid-idp-selector-button--type {
+  width: 100%;
+}
+.cid-idp-selector-button--large {
+  padding: 15px 26px;
+  font-size: 16px;
+}
+.cid-idp-selector-button--dark {
+  border: 1px solid #262626;
+  background-color: #262626;
+  color: white;
+}
+.cid-idp-selector-button--light {
+  border: 1px solid white;
+  background-color: white;
+  color: #262626;
+}
+.cid-idp-selector-button-icon {
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.cid-idp-selector-button--large .cid-idp-selector-button-icon {
+  width: 24px;
+  height: 24px;
+}
+.cid-idp-selector-button--dark .cid-idp-selector-button-icon {
+  fill: white;
+}
+.cid-idp-selector-button--light .cid-idp-selector-button-icon {
+  fill: #262626;
+}
+
+@media (max-width: 488px) {
+  .cid-idp-selector-button {
+    width: 100%;
+    min-width: auto;
+  }
+}

package/CidButton.d.ts

@@ -0,0 +1,26 @@
+import './CidButton.css';
+import './global.css';
+import { CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, IntroTextType, LogoMode, RequiredCertification } from './types';
+type CidButtonProps = {
+    onProceed: (authorisationServerId: string) => void;
+    claims: Claim[];
+    requiredClaims?: Claim[];
+    rpLogoUrl?: string;
+    requiredCertifications?: RequiredCertification[];
+    label?: CidButtonLabel;
+    size?: CidButtonSize;
+    type?: CidButtonType;
+    introTextType?: IntroTextType;
+    fullProcessCollapsible?: boolean;
+    participantsUri?: string;
+    certificationStatus?: CertificationStatus;
+    rpDataSharingDescription?: string;
+    enableManualVerification?: boolean;
+    showAllParticipants?: boolean;
+    theme?: CidButtonTheme;
+    logoLockupStyle?: LogoMode;
+    showInfoContent?: boolean;
+    onError?: (error: string) => void;
+};
+export declare const CidButton: React.FC<CidButtonProps>;
+export {};

package/CidButton.js

@@ -0,0 +1,133 @@
+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 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 { useAnalytics } from './analytics';
+import './global.css';
+import { getCurrentUrlOrigin } from './navigator';
+import { isIntroTextTypeValid, isRequiredClaimsValid } from './validator';
+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 = () => { }, }) => {
+    const { data: participants, error, isLoading, } = useSWR(participantsUri, () => __awaiter(void 0, void 0, void 0, function* () {
+        const response = yield fetch(participantsUri);
+        if (!response.ok)
+            throw new Error(response.statusText);
+        return response.json();
+    }));
+    useAnalytics();
+    const [showPopup, setShowPopup] = useState(false);
+    const analyticsData = {
+        claims,
+        rpLogoUrl,
+        requiredCertifications,
+        buttonLabel: label,
+        buttonSize: size,
+        type: type,
+        participantsUri,
+        certificationStatus,
+        rpDataSharingDescription,
+        enableManualVerification,
+        showAllParticipants,
+        theme,
+        logoLockupStyle,
+        showInfoContent,
+        rp_sub_brand: getCurrentUrlOrigin(),
+    };
+    const typeConfigMap = {
+        tiny: {
+            hasIntro: true,
+            hasBenefits: false,
+            hasProcess: false,
+            hasInfo: true,
+            hasHowItWorks: true,
+            hasLearnMore: false,
+        },
+        'medium benefits': {
+            hasIntro: true,
+            hasBenefits: true,
+            hasProcess: false,
+            hasInfo: true,
+            hasHowItWorks: true,
+            hasLearnMore: false,
+        },
+        'medium process': {
+            hasIntro: true,
+            hasBenefits: false,
+            hasProcess: true,
+            hasInfo: true,
+            hasHowItWorks: false,
+            hasLearnMore: true,
+        },
+        'full benefits': {
+            hasIntro: true,
+            hasBenefits: true,
+            hasProcess: false,
+            hasInfo: false,
+            hasHowItWorks: true,
+            hasLearnMore: false,
+        },
+        'full process': {
+            hasIntro: true,
+            hasBenefits: false,
+            hasProcess: true,
+            hasInfo: true,
+            hasHowItWorks: false,
+            hasLearnMore: true,
+        },
+    };
+    useEffect(() => {
+        analytics === null || analytics === void 0 ? void 0 : analytics.track('ConnectID Button Displayed', analyticsData);
+    }, []);
+    const handleOnProceed = (authorisationServerId, authorisationServerName) => {
+        analytics === null || analytics === void 0 ? void 0 : analytics.track('IDP Selected', Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName }));
+        setShowPopup(false);
+        onProceed(authorisationServerId);
+    };
+    const handleButtonClick = () => {
+        setShowPopup(true);
+        analytics === null || analytics === void 0 ? void 0 : analytics.track('ConnectID Button Clicked', analyticsData);
+    };
+    const handleClosePopup = () => {
+        setShowPopup(false);
+        analytics === null || analytics === void 0 ? void 0 : analytics.track('IDP Selector Popup Close Button Clicked', analyticsData);
+    };
+    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(', ')}.`;
+        console.log(errorMessage);
+        onError(errorMessage);
+        return null;
+    }
+    if (!isIntroTextTypeValid(type, introTextType)) {
+        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' }), (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' : ''}
+        `, 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) && _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.css

@@ -0,0 +1,25 @@
+.cid-idp-selector-how-it-works {
+  color: var(--charcoal);
+  display: flex;
+  justify-content: center;
+  width: fit-content;
+  margin: 0 auto;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+.cid-idp-selector-how-it-works--light {
+  color: white;
+}
+
+@media (max-width: 744px) {
+  .cid-idp-selector-how-it-works {
+    font-size: 13px;
+  } 
+}
+
+@media (max-width: 375px) {
+  .cid-idp-selector-how-it-works {
+    font-size: 12px;
+  } 
+}

package/CidButtonHowItWorks.d.ts

@@ -0,0 +1,2 @@
+import './CidButtonHowItWorks.css';
+export declare const CidButtonHowItWorks: () => import("react/jsx-runtime").JSX.Element;

package/CidButtonHowItWorks.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAnalytics } from './analytics';
+import { getCurrentUrlOrigin } from './navigator';
+import './CidButtonHowItWorks.css';
+import { ThemeContext } from './ThemeContext';
+import { useContext } from 'react';
+export const CidButtonHowItWorks = () => {
+    useAnalytics();
+    const theme = useContext(ThemeContext);
+    const handleClick = () => {
+        if (!analytics)
+            return;
+        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?" }));
+};

package/CidButtonInfo.css

@@ -0,0 +1,33 @@
+.cid-idp-selector-button-info {
+  color: var(--charcoal);
+  font-size: 14px;
+  align-items: flex-start;
+  justify-content: center;
+  text-align: center;
+  display: flex;
+  line-height: 130%;
+}
+.cid-idp-selector-button-info--light {
+  color: white;
+}
+.cid-idp-selector-button-info-icon {
+  flex-shrink: 0;
+  transform: translateY(2px);
+  margin-right: 4px;
+}
+.cid-idp-selector-button-info--light .cid-idp-selector-button-info-icon path {
+  stroke: white;
+}
+
+@media (max-width: 744px) {
+  .cid-idp-selector-button-info {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 375px) {
+  .cid-idp-selector-button-info {
+    font-size: 12px;
+    line-height: 120%;
+  }
+}

package/CidButtonInfo.d.ts

@@ -0,0 +1,2 @@
+import './CidButtonInfo.css';
+export declare const CidButtonInfo: () => import("react/jsx-runtime").JSX.Element;

package/CidButtonInfo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './CidButtonInfo.css';
+import { ThemeContext } from './ThemeContext';
+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"] }));
+};

package/FullProcess.css

@@ -0,0 +1,150 @@
+.cid-idp-selector-full-process {
+  padding: 14px 20px;
+  border-radius: 14px;
+  background-color: white;
+  border: 1px solid var(--charcoal);
+  margin-bottom: 20px;
+}
+.cid-idp-selector-full-process.open {
+  border: 1px solid var(--charcoal);
+}
+.cid-idp-selector-full-process.close {
+  border: 1px solid var(--charcoal50);
+}
+
+.cid-idp-selector-full-process.open.light {
+  border: 1px solid var(--charcoal10);
+}
+.cid-idp-selector-full-process.close.light {
+  border: 1px solid var(--charcoal50);
+}
+
+.cid-idp-selector-full-process--light {
+  border: 1px solid var(--charcoal50);
+  background-color: transparent;
+}
+.cid-idp-selector-full-process-title {
+  font-size: 20px;
+  color: var(--charcoal);
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cid-idp-selector-full-process--open .cid-idp-selector-full-process-title {
+  margin-bottom: 20px;
+}
+.cid-idp-selector-full-process-toggle {
+  cursor: pointer;
+}
+.cid-idp-selector-full-process-toggle path {
+  fill: var(--charcoal);
+}
+.cid-idp-selector-full-process--light .cid-idp-selector-full-process-toggle path {
+  fill: white;
+}
+.cid-idp-selector-full-process--open .cid-idp-selector-full-process-toggle {
+  transform: rotate(180deg);
+}
+.cid-idp-selector-full-process--light .cid-idp-selector-full-process-title {
+  color: white;
+}
+.cid-idp-selector-full-process-step {
+  display: flex;
+  align-items: center;
+}
+.cid-idp-selector-full-process-dot {
+  width: 11px;
+  height: 11px;
+  background-color: var(--mint);
+  border-radius: 50%;
+  border: 1px solid var(--charcoal);
+}
+.cid-idp-selector-full-process-dot-wrapper {
+  width: 17px;
+  height: 17px;
+  background-color: white;
+  border-radius: 50%;
+  border: 1px solid var(--charcoal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.cid-idp-selector-full-process-line {
+  width: 100%;
+  height: 1px;
+  background-color: var(--charcoal);
+}
+.cid-idp-selector-full-process--light .cid-idp-selector-full-process-line {
+  background-color: white;
+} 
+.cid-idp-selector-full-process-grid {
+  display: none;
+  grid-template-columns: 1fr 1fr 132px;
+  grid-row-gap: 8px;
+}
+.cid-idp-selector-full-process--open .cid-idp-selector-full-process-grid {
+  display: grid;
+}
+.cid-idp-selector-full-process-subtitle {
+  max-width: 132px;
+  font-size: 14px;
+  color: var(--charcoal);
+  display: none;
+  line-height: 130%;
+  margin-right: 26px;
+}
+.cid-idp-selector-full-process--light .cid-idp-selector-full-process-subtitle {
+  color: white;
+}
+.cid-idp-selector-full-process-subtitle.cid-idp-selector-full-process-subtitle--wide {
+  display: block;
+}
+
+@media (max-width: 1280px) {
+  .cid-idp-selector-full-process-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .cid-idp-selector-full-process-subtitle.cid-idp-selector-full-process-subtitle--wide {
+    display: none;
+  }
+  .cid-idp-selector-full-process-subtitle {
+    display: block;
+  }
+  .cid-idp-selector-full-process-line {
+    width: 1px;
+    height: 26px;
+    background-color: var(--charcoal);
+  }
+  .cid-idp-selector-full-process-grid {
+    grid-template-columns: 19px 1fr;
+    column-gap: 8px;
+    grid-row-gap: 0;
+  }
+  .cid-idp-selector-full-process-step {
+    flex-direction: column;
+  }
+  .cid-idp-selector-full-process-subtitle {
+    max-width: 100%;
+    margin: 0;
+  }
+}
+
+@media (max-width: 430px) {
+  .cid-idp-selector-full-process-title {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 375px) {
+  .cid-idp-selector-full-process-title {
+    font-size: 16px;
+  }
+}
+
+@media(max-width: 320px) {
+  .cid-idp-selector-full-process-line {
+    height: 35px;
+  }
+}

package/FullProcess.d.ts

@@ -0,0 +1,4 @@
+import './FullProcess.css';
+export declare const FullProcess: React.FC<{
+    collapsible?: boolean;
+}>;

package/FullProcess.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { ThemeContext } from './ThemeContext';
+import './FullProcess.css';
+// on a wide screen the layout is like this
+// .----------.----------.
+// text       text       text
+//
+// however, when the screen is not wide, the layout is like this
+// . text
+// |
+// |
+// . text
+// |
+// |
+// . text
+export const FullProcess = ({ collapsible = false }) => {
+    const theme = useContext(ThemeContext);
+    const shouldOpen = collapsible ? false : true;
+    const [open, setOpen] = useState(shouldOpen);
+    const handleToggle = () => {
+        if (!collapsible)
+            return;
+        setOpen(!open);
+    };
+    const colorChanged = () => {
+        if (collapsible === false) {
+            return true;
+        }
+        if (open === true) {
+            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("div", { 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

@@ -0,0 +1,53 @@
+.cid-idp-selector-idp-logo-list-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 6px;
+  margin-bottom: 12px;
+}
+.cid-idp-selector-idp-logo-list-title {
+  font-size: 12px;
+  color: var(--charcoal75);
+}
+.cid-idp-selector-idp-logo-list-title.cid-idp-selector-idp-logo-list-title--light {
+  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;
+}
+.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

@@ -0,0 +1,8 @@
+import './IdpLogoList.css';
+import { LogoMode } from './types';
+type IdpLogoListProps = {
+    loading: boolean;
+    logoLockupStyle?: LogoMode;
+};
+export declare const IdpLogoList: React.FC<IdpLogoListProps>;
+export {};

package/IdpLogoList.js

@@ -0,0 +1,13 @@
+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',
+};
+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-wrapper", "data-testid": "idp-logo-list-wrapper", children: logoLockupStyle === 'dark' ? (_jsx("img", { "data-testid": "logo-lockup-dark", className: "cid-logo-lockup", src: logoLockupUrl.dark })) : (_jsx("img", { "data-testid": "logo-lockup-light", className: "cid-logo-lockup", src: logoLockupUrl.light })) }));
+};