@dynamic-labs/sdk-react-core 4.57.2 → 4.58.0

package/src/lib/widgets/DynamicWidget/views/SettingsView/SettingsView.js

@@ -10,9 +10,9 @@ import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { ReactComponent as SvgAccountAndSecurity } from '../../../../shared/assets/account-and-security.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgConnect } from '../../../../shared/assets/connect.js';
 import { ReactComponent as SvgConnectedApps } from '../../../../shared/assets/connected-apps.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgConnect } from '../../../../shared/assets/connect.js';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.cjs

@@ -0,0 +1,54 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var Input = require('../../../../components/Input/Input.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var ToggleVisibilityButton = require('../../../../components/ToggleVisibilityButton/ToggleVisibilityButton.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var checkCircle = require('../../../../shared/assets/check-circle.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var exclamationCircle = require('../../../../shared/assets/exclamation-circle.cjs');
+var secureAction = require('../../../../shared/assets/secure-action.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+
+const SetupPasswordConfirmView = ({ password, onContinue, onBack, }) => {
+    const { t } = reactI18next.useTranslation();
+    const [confirmPassword, setConfirmPassword] = React.useState('');
+    const [showPassword, setShowPassword] = React.useState(false);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const passwordsMatch = password === confirmPassword;
+    const isValid = passwordsMatch && confirmPassword.length > 0;
+    const handlePasswordChange = React.useCallback((e) => {
+        setConfirmPassword(e.target.value);
+        setHasInteracted(true);
+    }, []);
+    const handleToggleVisibility = React.useCallback((hidden) => {
+        setShowPassword(!hidden);
+    }, []);
+    const handleContinue = React.useCallback(() => {
+        if (isValid) {
+            onContinue();
+        }
+    }, [isValid, onContinue]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-confirm-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    const showMatchMessage = hasInteracted && confirmPassword.length > 0;
+    const matchMessage = passwordsMatch
+        ? t('dyn_setup_password.confirm.match')
+        : t('dyn_setup_password.confirm.mismatch');
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.confirm.title', children: t('dyn_setup_password.confirm.title') }) }), jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view', children: [jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-confirm-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(secureAction.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.confirm.description', className: 'setup-password-confirm-view__description', children: t('dyn_setup_password.confirm.description') }), jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__input-container', children: [jsxRuntime.jsx(Input.Input, { id: 'setup-password-confirm-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.confirm.label'), placeholder: t('dyn_setup_password.confirm.placeholder'), value: confirmPassword, onChange: handlePasswordChange, variant: 'regular', error: !passwordsMatch && hasInteracted && confirmPassword.length > 0, suffix: 
+                                        // eslint-disable-next-line react/jsx-wrap-multilines
+                                        jsxRuntime.jsx(ToggleVisibilityButton.ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), showMatchMessage && (jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__match-indicator', children: [jsxRuntime.jsx(Icon.Icon, { color: passwordsMatch ? 'success-1' : 'text-error', size: 'medium', children: passwordsMatch ? (jsxRuntime.jsx(checkCircle.ReactComponent, {})) : (jsxRuntime.jsx(exclamationCircle.ReactComponent, {})) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: passwordsMatch ? 'secondary' : 'error-1', children: matchMessage })] }))] })] }), jsxRuntime.jsx("div", { className: 'setup-password-confirm-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-confirm-continue-button', onClick: handleContinue, disabled: !isValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] })] }));
+};
+
+exports.SetupPasswordConfirmView = SetupPasswordConfirmView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type SetupPasswordConfirmViewProps = {
+    password: string;
+    onContinue: () => void;
+    onBack: () => void;
+};
+export declare const SetupPasswordConfirmView: FC<SetupPasswordConfirmViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.js

@@ -0,0 +1,50 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { Input } from '../../../../components/Input/Input.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { ToggleVisibilityButton } from '../../../../components/ToggleVisibilityButton/ToggleVisibilityButton.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgCheckCircle } from '../../../../shared/assets/check-circle.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgExclamationCircle } from '../../../../shared/assets/exclamation-circle.js';
+import { ReactComponent as SvgSecureAction } from '../../../../shared/assets/secure-action.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const SetupPasswordConfirmView = ({ password, onContinue, onBack, }) => {
+    const { t } = useTranslation();
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [hasInteracted, setHasInteracted] = useState(false);
+    const passwordsMatch = password === confirmPassword;
+    const isValid = passwordsMatch && confirmPassword.length > 0;
+    const handlePasswordChange = useCallback((e) => {
+        setConfirmPassword(e.target.value);
+        setHasInteracted(true);
+    }, []);
+    const handleToggleVisibility = useCallback((hidden) => {
+        setShowPassword(!hidden);
+    }, []);
+    const handleContinue = useCallback(() => {
+        if (isValid) {
+            onContinue();
+        }
+    }, [isValid, onContinue]);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-confirm-back-button', children: jsx(SvgChevronLeft, {}) }));
+    const showMatchMessage = hasInteracted && confirmPassword.length > 0;
+    const matchMessage = passwordsMatch
+        ? t('dyn_setup_password.confirm.match')
+        : t('dyn_setup_password.confirm.mismatch');
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.confirm.title', children: t('dyn_setup_password.confirm.title') }) }), jsxs("div", { className: 'setup-password-confirm-view', children: [jsxs("div", { className: 'setup-password-confirm-view__body', children: [jsx("div", { className: 'setup-password-confirm-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgSecureAction, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.confirm.description', className: 'setup-password-confirm-view__description', children: t('dyn_setup_password.confirm.description') }), jsxs("div", { className: 'setup-password-confirm-view__input-container', children: [jsx(Input, { id: 'setup-password-confirm-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.confirm.label'), placeholder: t('dyn_setup_password.confirm.placeholder'), value: confirmPassword, onChange: handlePasswordChange, variant: 'regular', error: !passwordsMatch && hasInteracted && confirmPassword.length > 0, suffix: 
+                                        // eslint-disable-next-line react/jsx-wrap-multilines
+                                        jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), showMatchMessage && (jsxs("div", { className: 'setup-password-confirm-view__match-indicator', children: [jsx(Icon, { color: passwordsMatch ? 'success-1' : 'text-error', size: 'medium', children: passwordsMatch ? (jsx(SvgCheckCircle, {})) : (jsx(SvgExclamationCircle, {})) }), jsx(Typography, { variant: 'body_small', color: passwordsMatch ? 'secondary' : 'error-1', children: matchMessage })] }))] })] }), jsx("div", { className: 'setup-password-confirm-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-confirm-continue-button', onClick: handleContinue, disabled: !isValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] })] }));
+};
+
+export { SetupPasswordConfirmView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/index.d.ts

@@ -0,0 +1,2 @@
+export { SetupPasswordConfirmView } from './SetupPasswordConfirmView';
+export type { SetupPasswordConfirmViewProps } from './SetupPasswordConfirmView';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/PasswordRequirement.cjs

@@ -0,0 +1,15 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('react');
+var checkCircle = require('../../../../shared/assets/check-circle.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+
+const PasswordRequirement = ({ met, text, }) => (jsxRuntime.jsxs("div", { className: 'password-requirement', children: [met ? (jsxRuntime.jsx("div", { className: 'password-requirement__icon-wrapper', children: jsxRuntime.jsx(checkCircle.ReactComponent, {}) })) : (jsxRuntime.jsx("div", { className: 'password-requirement__circle' })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: met ? 'primary' : 'secondary', weight: 'regular', children: text })] }));
+
+exports.PasswordRequirement = PasswordRequirement;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/PasswordRequirement.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type PasswordRequirementProps = {
+    met: boolean;
+    text: string;
+};
+export declare const PasswordRequirement: FC<PasswordRequirementProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/PasswordRequirement.js

@@ -0,0 +1,11 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import 'react';
+import { ReactComponent as SvgCheckCircle } from '../../../../shared/assets/check-circle.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const PasswordRequirement = ({ met, text, }) => (jsxs("div", { className: 'password-requirement', children: [met ? (jsx("div", { className: 'password-requirement__icon-wrapper', children: jsx(SvgCheckCircle, {}) })) : (jsx("div", { className: 'password-requirement__circle' })), jsx(Typography, { variant: 'body_small', color: met ? 'primary' : 'secondary', weight: 'regular', children: text })] }));
+
+export { PasswordRequirement };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/SetupPasswordEnterView.cjs

@@ -0,0 +1,57 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var Input = require('../../../../components/Input/Input.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var ToggleVisibilityButton = require('../../../../components/ToggleVisibilityButton/ToggleVisibilityButton.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var passwordLockIcon = require('../../../../shared/assets/password-lock-icon.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var PasswordRequirement = require('./PasswordRequirement.cjs');
+
+const PASSWORD_MIN_LENGTH = 8;
+const PASSWORD_MAX_LENGTH = 70;
+const validatePassword = (password) => ({
+    length: password.length >= PASSWORD_MIN_LENGTH &&
+        password.length <= PASSWORD_MAX_LENGTH,
+    lowercase: /[a-z]/.test(password),
+    number: /\d/.test(password),
+    symbol: /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password),
+    uppercase: /[A-Z]/.test(password),
+});
+const SetupPasswordEnterView = ({ onContinue, onBack, }) => {
+    const { t } = reactI18next.useTranslation();
+    const [password, setPassword] = React.useState('');
+    const [showPassword, setShowPassword] = React.useState(false);
+    const requirements = validatePassword(password);
+    const allValid = Object.values(requirements).every(Boolean);
+    const handlePasswordChange = React.useCallback((e) => {
+        setPassword(e.target.value);
+    }, []);
+    const handleToggleVisibility = React.useCallback((hidden) => {
+        setShowPassword(!hidden);
+    }, []);
+    const handleContinue = React.useCallback(() => {
+        if (allValid) {
+            onContinue(password);
+        }
+    }, [allValid, onContinue, password]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-enter-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.enter.title', children: t('dyn_setup_password.enter.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-enter-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-enter-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-enter-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(passwordLockIcon.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.enter.description', className: 'setup-password-enter-view__description', children: t('dyn_setup_password.enter.description') }), jsxRuntime.jsx(Input.Input, { id: 'setup-password-enter-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.enter.label'), placeholder: t('dyn_setup_password.enter.placeholder'), value: password, onChange: handlePasswordChange, variant: 'regular', suffix: 
+                            // eslint-disable-next-line react/jsx-wrap-multilines
+                            jsxRuntime.jsx(ToggleVisibilityButton.ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), jsxRuntime.jsxs("div", { className: 'setup-password-enter-view__requirements', children: [jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.length, text: t('dyn_setup_password.enter.requirement_length') }), jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.uppercase, text: t('dyn_setup_password.enter.requirement_uppercase') }), jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.lowercase, text: t('dyn_setup_password.enter.requirement_lowercase') }), jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.number, text: t('dyn_setup_password.enter.requirement_number') }), jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.symbol, text: t('dyn_setup_password.enter.requirement_symbol') })] }), jsxRuntime.jsx("div", { className: 'setup-password-enter-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-enter-continue-button', onClick: handleContinue, disabled: !allValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                    color: 'inherit',
+                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+};
+
+exports.SetupPasswordEnterView = SetupPasswordEnterView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/SetupPasswordEnterView.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type SetupPasswordEnterViewProps = {
+    onContinue: (password: string) => void;
+    onBack: () => void;
+};
+export declare const SetupPasswordEnterView: FC<SetupPasswordEnterViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/SetupPasswordEnterView.js

@@ -0,0 +1,53 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { Input } from '../../../../components/Input/Input.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { ToggleVisibilityButton } from '../../../../components/ToggleVisibilityButton/ToggleVisibilityButton.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgPasswordLockIcon } from '../../../../shared/assets/password-lock-icon.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { PasswordRequirement } from './PasswordRequirement.js';
+
+const PASSWORD_MIN_LENGTH = 8;
+const PASSWORD_MAX_LENGTH = 70;
+const validatePassword = (password) => ({
+    length: password.length >= PASSWORD_MIN_LENGTH &&
+        password.length <= PASSWORD_MAX_LENGTH,
+    lowercase: /[a-z]/.test(password),
+    number: /\d/.test(password),
+    symbol: /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password),
+    uppercase: /[A-Z]/.test(password),
+});
+const SetupPasswordEnterView = ({ onContinue, onBack, }) => {
+    const { t } = useTranslation();
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const requirements = validatePassword(password);
+    const allValid = Object.values(requirements).every(Boolean);
+    const handlePasswordChange = useCallback((e) => {
+        setPassword(e.target.value);
+    }, []);
+    const handleToggleVisibility = useCallback((hidden) => {
+        setShowPassword(!hidden);
+    }, []);
+    const handleContinue = useCallback(() => {
+        if (allValid) {
+            onContinue(password);
+        }
+    }, [allValid, onContinue, password]);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-enter-back-button', children: jsx(SvgChevronLeft, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.enter.title', children: t('dyn_setup_password.enter.title') }) }), jsx("div", { className: 'setup-password-enter-view', children: jsxs("div", { className: 'setup-password-enter-view__body', children: [jsx("div", { className: 'setup-password-enter-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgPasswordLockIcon, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.enter.description', className: 'setup-password-enter-view__description', children: t('dyn_setup_password.enter.description') }), jsx(Input, { id: 'setup-password-enter-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.enter.label'), placeholder: t('dyn_setup_password.enter.placeholder'), value: password, onChange: handlePasswordChange, variant: 'regular', suffix: 
+                            // eslint-disable-next-line react/jsx-wrap-multilines
+                            jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), jsxs("div", { className: 'setup-password-enter-view__requirements', children: [jsx(PasswordRequirement, { met: requirements.length, text: t('dyn_setup_password.enter.requirement_length') }), jsx(PasswordRequirement, { met: requirements.uppercase, text: t('dyn_setup_password.enter.requirement_uppercase') }), jsx(PasswordRequirement, { met: requirements.lowercase, text: t('dyn_setup_password.enter.requirement_lowercase') }), jsx(PasswordRequirement, { met: requirements.number, text: t('dyn_setup_password.enter.requirement_number') }), jsx(PasswordRequirement, { met: requirements.symbol, text: t('dyn_setup_password.enter.requirement_symbol') })] }), jsx("div", { className: 'setup-password-enter-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-enter-continue-button', onClick: handleContinue, disabled: !allValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                    color: 'inherit',
+                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+};
+
+export { SetupPasswordEnterView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/index.d.ts

@@ -0,0 +1,4 @@
+export { SetupPasswordEnterView } from './SetupPasswordEnterView';
+export type { SetupPasswordEnterViewProps } from './SetupPasswordEnterView';
+export { PasswordRequirement } from './PasswordRequirement';
+export type { PasswordRequirementProps } from './PasswordRequirement';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.cjs

@@ -0,0 +1,83 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Alert = require('../../../../components/Alert/Alert.cjs');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var exclamationCircle = require('../../../../shared/assets/exclamation-circle.cjs');
+var knowledgeCheckIcon = require('../../../../shared/assets/knowledge-check-icon.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+
+const CORRECT_ANSWER = 'c';
+const OPTIONS = [
+    {
+        label: 'A',
+        translationKey: 'dyn_setup_password.knowledge_check.option_a',
+        value: 'a',
+    },
+    {
+        label: 'B',
+        translationKey: 'dyn_setup_password.knowledge_check.option_b',
+        value: 'b',
+    },
+    {
+        label: 'C',
+        translationKey: 'dyn_setup_password.knowledge_check.option_c',
+        value: 'c',
+    },
+];
+const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, onReviewTerms }) => {
+    const { t } = reactI18next.useTranslation();
+    const [selectedAnswer, setSelectedAnswer] = React.useState('');
+    const [showError, setShowError] = React.useState(false);
+    const handleAnswerChange = React.useCallback((e) => {
+        setSelectedAnswer(e.target.value);
+        setShowError(false);
+    }, []);
+    const handleContinue = React.useCallback(() => {
+        if (selectedAnswer === CORRECT_ANSWER) {
+            onContinue();
+        }
+        else {
+            setShowError(true);
+        }
+    }, [selectedAnswer, onContinue]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-knowledge-check-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.knowledge_check.title', children: t('dyn_setup_password.knowledge_check.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__body', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__content', children: [jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(knowledgeCheckIcon.ReactComponent, { width: 56, height: 56 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', copykey: 'dyn_setup_password.knowledge_check.description', className: 'setup-password-knowledge-check-view__description', children: t('dyn_setup_password.knowledge_check.description') })] }), jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__alert', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'semibold', copykey: 'dyn_setup_password.knowledge_check.question', className: 'setup-password-knowledge-check-view__question', children: t('dyn_setup_password.knowledge_check.question') }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__options', children: OPTIONS.map((option) => {
+                                                const isSelected = selectedAnswer === option.value;
+                                                const hasError = showError && isSelected;
+                                                return (jsxRuntime.jsxs("div", { className: `setup-password-knowledge-check-view__option ${isSelected
+                                                        ? 'setup-password-knowledge-check-view__option--selected'
+                                                        : ''} ${hasError
+                                                        ? 'setup-password-knowledge-check-view__option--error'
+                                                        : ''} ${showError
+                                                        ? 'setup-password-knowledge-check-view__option--disabled'
+                                                        : ''}`, onClick: () => {
+                                                        if (!showError) {
+                                                            handleAnswerChange({
+                                                                target: { value: option.value },
+                                                            });
+                                                        }
+                                                    }, children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: hasError
+                                                                ? 'error-1'
+                                                                : isSelected
+                                                                    ? 'brand-primary'
+                                                                    : 'tertiary', weight: 'bold', className: 'setup-password-knowledge-check-view__option-label', children: option.label }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: t(option.translationKey) })] }, option.value));
+                                            }) })] })] }), jsxRuntime.jsxs("div", { children: [showError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Alert.Alert, { variant: 'error', icon: jsxRuntime.jsx(exclamationCircle.ReactComponent, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__review-button', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: onReviewTerms, copykey: 'dyn_setup_password.knowledge_check.review_terms', dataTestId: 'setup-password-knowledge-check-review-button', buttonVariant: 'brand-primary', className: 'setup-password-knowledge-check-view__alert-button', typographyProps: {
+                                                    color: 'inherit',
+                                                }, expanded: true, children: t('dyn_setup_password.knowledge_check.review_terms') }) })] })), !showError && (jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
+                                            color: 'inherit',
+                                        }, expanded: true, children: t('dyn_setup_password.button.confirm') }) }))] })] }) })] }));
+};
+
+exports.SetupPasswordKnowledgeCheckView = SetupPasswordKnowledgeCheckView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type SetupPasswordKnowledgeCheckViewProps = {
+    onContinue: () => void;
+    onBack: () => void;
+    onReviewTerms: () => void;
+};
+export declare const SetupPasswordKnowledgeCheckView: FC<SetupPasswordKnowledgeCheckViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.js

@@ -0,0 +1,79 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert } from '../../../../components/Alert/Alert.js';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgExclamationCircle } from '../../../../shared/assets/exclamation-circle.js';
+import { ReactComponent as SvgKnowledgeCheckIcon } from '../../../../shared/assets/knowledge-check-icon.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const CORRECT_ANSWER = 'c';
+const OPTIONS = [
+    {
+        label: 'A',
+        translationKey: 'dyn_setup_password.knowledge_check.option_a',
+        value: 'a',
+    },
+    {
+        label: 'B',
+        translationKey: 'dyn_setup_password.knowledge_check.option_b',
+        value: 'b',
+    },
+    {
+        label: 'C',
+        translationKey: 'dyn_setup_password.knowledge_check.option_c',
+        value: 'c',
+    },
+];
+const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, onReviewTerms }) => {
+    const { t } = useTranslation();
+    const [selectedAnswer, setSelectedAnswer] = useState('');
+    const [showError, setShowError] = useState(false);
+    const handleAnswerChange = useCallback((e) => {
+        setSelectedAnswer(e.target.value);
+        setShowError(false);
+    }, []);
+    const handleContinue = useCallback(() => {
+        if (selectedAnswer === CORRECT_ANSWER) {
+            onContinue();
+        }
+        else {
+            setShowError(true);
+        }
+    }, [selectedAnswer, onContinue]);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-knowledge-check-back-button', children: jsx(SvgChevronLeft, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.knowledge_check.title', children: t('dyn_setup_password.knowledge_check.title') }) }), jsx("div", { className: 'setup-password-knowledge-check-view', children: jsxs("div", { className: 'setup-password-knowledge-check-view__body', children: [jsxs("div", { children: [jsxs("div", { className: 'setup-password-knowledge-check-view__content', children: [jsx("div", { className: 'setup-password-knowledge-check-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgKnowledgeCheckIcon, { width: 56, height: 56 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', copykey: 'dyn_setup_password.knowledge_check.description', className: 'setup-password-knowledge-check-view__description', children: t('dyn_setup_password.knowledge_check.description') })] }), jsxs("div", { className: 'setup-password-knowledge-check-view__alert', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'semibold', copykey: 'dyn_setup_password.knowledge_check.question', className: 'setup-password-knowledge-check-view__question', children: t('dyn_setup_password.knowledge_check.question') }), jsx("div", { className: 'setup-password-knowledge-check-view__options', children: OPTIONS.map((option) => {
+                                                const isSelected = selectedAnswer === option.value;
+                                                const hasError = showError && isSelected;
+                                                return (jsxs("div", { className: `setup-password-knowledge-check-view__option ${isSelected
+                                                        ? 'setup-password-knowledge-check-view__option--selected'
+                                                        : ''} ${hasError
+                                                        ? 'setup-password-knowledge-check-view__option--error'
+                                                        : ''} ${showError
+                                                        ? 'setup-password-knowledge-check-view__option--disabled'
+                                                        : ''}`, onClick: () => {
+                                                        if (!showError) {
+                                                            handleAnswerChange({
+                                                                target: { value: option.value },
+                                                            });
+                                                        }
+                                                    }, children: [jsx(Typography, { variant: 'body_normal', color: hasError
+                                                                ? 'error-1'
+                                                                : isSelected
+                                                                    ? 'brand-primary'
+                                                                    : 'tertiary', weight: 'bold', className: 'setup-password-knowledge-check-view__option-label', children: option.label }), jsx(Typography, { variant: 'body_small', color: 'primary', children: t(option.translationKey) })] }, option.value));
+                                            }) })] })] }), jsxs("div", { children: [showError && (jsxs(Fragment, { children: [jsx(Alert, { variant: 'error', icon: jsx(SvgExclamationCircle, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') }), jsx("div", { className: 'setup-password-knowledge-check-view__review-button', children: jsx(TypographyButton, { onClick: onReviewTerms, copykey: 'dyn_setup_password.knowledge_check.review_terms', dataTestId: 'setup-password-knowledge-check-review-button', buttonVariant: 'brand-primary', className: 'setup-password-knowledge-check-view__alert-button', typographyProps: {
+                                                    color: 'inherit',
+                                                }, expanded: true, children: t('dyn_setup_password.knowledge_check.review_terms') }) })] })), !showError && (jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
+                                            color: 'inherit',
+                                        }, expanded: true, children: t('dyn_setup_password.button.confirm') }) }))] })] }) })] }));
+};
+
+export { SetupPasswordKnowledgeCheckView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/index.d.ts

@@ -0,0 +1,2 @@
+export { SetupPasswordKnowledgeCheckView } from './SetupPasswordKnowledgeCheckView';
+export type { SetupPasswordKnowledgeCheckViewProps } from './SetupPasswordKnowledgeCheckView';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.cjs

@@ -0,0 +1,27 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var checkCircleFilled = require('../../../../shared/assets/check-circle-filled.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+
+const SetupPasswordSuccessView = ({ onDone, }) => {
+    const { t } = reactI18next.useTranslation();
+    const handleDone = React.useCallback(() => {
+        onDone();
+    }, [onDone]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.success.title', children: t('dyn_setup_password.success.title') }) }), jsxRuntime.jsxs("div", { className: 'setup-password-success-view', children: [jsxRuntime.jsx("div", { className: 'setup-password-success-view__content', children: jsxRuntime.jsxs("div", { className: 'setup-password-success-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-success-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(checkCircleFilled.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.success.description', className: 'setup-password-success-view__description', children: t('dyn_setup_password.success.description') })] }) }), jsxRuntime.jsx("div", { className: 'setup-password-success-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-success-done-button', onClick: handleDone, copykey: 'dyn_setup_password.button.done', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.done') }) })] })] }));
+};
+
+exports.SetupPasswordSuccessView = SetupPasswordSuccessView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export type SetupPasswordSuccessViewProps = {
+    onDone: () => void;
+};
+export declare const SetupPasswordSuccessView: FC<SetupPasswordSuccessViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.js

@@ -0,0 +1,23 @@
+'use client'
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgCheckCircleFilled } from '../../../../shared/assets/check-circle-filled.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const SetupPasswordSuccessView = ({ onDone, }) => {
+    const { t } = useTranslation();
+    const handleDone = useCallback(() => {
+        onDone();
+    }, [onDone]);
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.success.title', children: t('dyn_setup_password.success.title') }) }), jsxs("div", { className: 'setup-password-success-view', children: [jsx("div", { className: 'setup-password-success-view__content', children: jsxs("div", { className: 'setup-password-success-view__body', children: [jsx("div", { className: 'setup-password-success-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgCheckCircleFilled, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.success.description', className: 'setup-password-success-view__description', children: t('dyn_setup_password.success.description') })] }) }), jsx("div", { className: 'setup-password-success-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-success-done-button', onClick: handleDone, copykey: 'dyn_setup_password.button.done', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.done') }) })] })] }));
+};
+
+export { SetupPasswordSuccessView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/index.d.ts

@@ -0,0 +1,2 @@
+export { SetupPasswordSuccessView } from './SetupPasswordSuccessView';
+export type { SetupPasswordSuccessViewProps } from './SetupPasswordSuccessView';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordTermsView/SetupPasswordTermsView.cjs

@@ -0,0 +1,37 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Checkbox = require('../../../../components/Checkbox/Checkbox.cjs');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var warningCircleOrange = require('../../../../shared/assets/warning-circle-orange.cjs');
+
+const SetupPasswordTermsView = ({ onContinue, onBack, }) => {
+    const { t } = reactI18next.useTranslation();
+    const [checkedItems, setCheckedItems] = React.useState({
+        term1: false,
+        term2: false,
+        term3: false,
+    });
+    const handleCheckboxChange = React.useCallback((termKey) => {
+        setCheckedItems((prev) => (Object.assign(Object.assign({}, prev), { [termKey]: !prev[termKey] })));
+    }, []);
+    const allChecked = Object.values(checkedItems).every(Boolean);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-terms-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.terms.title', children: t('dyn_setup_password.terms.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-terms-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-terms-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-terms-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(warningCircleOrange.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.terms.description', className: 'setup-password-terms-view__description', children: t('dyn_setup_password.terms.description') }), jsxRuntime.jsxs("div", { className: 'setup-password-terms-view__checkboxes', children: [jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term1, onChange: () => handleCheckboxChange('term1'), ariaLabel: t('dyn_setup_password.terms.checkbox_1') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_1', children: t('dyn_setup_password.terms.checkbox_1') })] }), jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term2, onChange: () => handleCheckboxChange('term2'), ariaLabel: t('dyn_setup_password.terms.checkbox_2') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_2', children: t('dyn_setup_password.terms.checkbox_2') })] }), jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term3, onChange: () => handleCheckboxChange('term3'), ariaLabel: t('dyn_setup_password.terms.checkbox_3') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_3', children: t('dyn_setup_password.terms.checkbox_3') })] })] }), jsxRuntime.jsx("div", { className: 'setup-password-terms-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-terms-continue-button', onClick: onContinue, disabled: !allChecked, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                    color: 'inherit',
+                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+};
+
+exports.SetupPasswordTermsView = SetupPasswordTermsView;