@adyen/kyc-components 4.2.0 → 4.3.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (329) hide show
  1. package/dist/{AcceptTermsOfServiceComponent-DDj3rbOx.js → AcceptTermsOfServiceComponent-CIGLKMdE.js} +30 -25
  2. package/dist/{AccountSetupRejected--ItoNQ2p.js → AccountSetupRejected-C4YYsvH_.js} +2 -5
  3. package/dist/{ActionBar-BQ3qEC6p.js → ActionBar-BYDfMuhb.js} +2 -2
  4. package/dist/{Address-BeNF2HFn.js → Address-CwI78DoG.js} +11 -13
  5. package/dist/{Avatar-BjYbzIQC.js → Avatar-WqPDmbFX.js} +2 -2
  6. package/dist/{BusinessFinancingComponent-BQj2ehD2.js → BusinessFinancingComponent-DSfSnWnf.js} +6 -6
  7. package/dist/{BusinessFinancingDropin-C2qel0rF.js → BusinessFinancingDropin-CEq36mkn.js} +200 -123
  8. package/dist/{BusinessFinancingPage-QTOcfbBt.js → BusinessFinancingPage-CmB-76a7.js} +5 -5
  9. package/dist/{BusinessTypeSelectionPage-CNBTnHYV.js → BusinessTypeSelectionPage-CK8yXrJo.js} +9 -9
  10. package/dist/{Checkbox-PcQW98Hc.js → Checkbox-tCkuUbA7.js} +2 -2
  11. package/dist/{Confirm-D7uRirpk.js → Confirm-I97MrYoL.js} +3 -3
  12. package/dist/{ConstitutionalDocument-DX2n4nuI.js → ConstitutionalDocument-Cq-LDPDD.js} +39 -22
  13. package/dist/{ContactDetails-DqtPuOz3.js → ContactDetails-DNzDdLJL.js} +6 -9
  14. package/dist/{ContextGuidance-BBPWGkJc.js → ContextGuidance-B8m5vEu7.js} +2 -3
  15. package/dist/{CountryField-9-8UreyJ.js → CountryField-BrFxAmiG.js} +4 -6
  16. package/dist/{CreateIndividualComponent-DMtlWBqw.js → CreateIndividualComponent-CxnADflO.js} +7 -7
  17. package/dist/{CreateTransferInstrumentComponent-D0prW4xg.js → CreateTransferInstrumentComponent-TRsKqwQ9.js} +4 -4
  18. package/dist/{Currency-Cjnl8BIe.js → Currency-D3LTqRH3.js} +7 -7
  19. package/dist/{CustomerSupport-CPaXjNH1.js → CustomerSupport-C42DyA-v.js} +10 -11
  20. package/dist/{DebugModal-Crim4ok3.js → DebugModal-BYDWpOxW.js} +8 -9
  21. package/dist/{DecisionMakerDetailsPage-CRnyPLiF.js → DecisionMakerDetailsPage-4IOkB48k.js} +9 -9
  22. package/dist/{DecisionMakers-laVUncMl.js → DecisionMakers-Bl7pKzkZ.js} +23 -33
  23. package/dist/{Dropzone-L5oCc5ZM.js → Dropzone-DqWszjhW.js} +4 -4
  24. package/dist/{EmbeddedStatus-Bc6bUaC6.js → EmbeddedStatus-D5LsD3lR.js} +3 -3
  25. package/dist/{EndStateLayout-irx07x7E.js → EndStateLayout-Bq9MkMEv.js} +2 -2
  26. package/dist/{EntityAssociation-CvlitxTW.js → EntityAssociation-CVoyFJ5y.js} +5 -6
  27. package/dist/{EntityGuidanceStatus-CVBuyGry.js → EntityGuidanceStatus-5lEC3wUP.js} +4 -4
  28. package/dist/{ErrorPanel-GWNSNY8U.js → ErrorPanel-ByEHPwyg.js} +2 -3
  29. package/dist/{Field-BxFn1eol.js → Field-D5s65Yqj.js} +3 -3
  30. package/dist/{FormNavigation-BUF4Hm5v.js → FormNavigation-BTZnWvIv.js} +3 -3
  31. package/dist/{FormWrapper-B215nZbo.js → FormWrapper-BDUszMjH.js} +9 -9
  32. package/dist/{Image-BrHT9RgB.js → Image-BghQ5E4W.js} +2 -2
  33. package/dist/{Individual.rules-CSzG8cP-.js → Individual.rules-O3C7fCyC.js} +8 -8
  34. package/dist/{IndividualDropin-a9OrNzNE.js → IndividualDropin-CAXnyQYB.js} +177 -132
  35. package/dist/{InputDate-C-KJumMv.js → InputDate-DRATD19h.js} +2 -2
  36. package/dist/{InputText-CdqQ2Npg.js → InputText-D77Doqht.js} +2 -2
  37. package/dist/{Introduction-CWh2x4Ey.js → Introduction-CYwGdYIW.js} +4 -4
  38. package/dist/{JpAddress-5Np6iypt.js → JpAddress-BDv3inK2.js} +11 -12
  39. package/dist/{LandingLayout-D_GwiUpJ.js → LandingLayout-DEbu_igh.js} +2 -3
  40. package/dist/{LegalCompanyNameField-DNG1YgY-.js → LegalCompanyNameField-CLYsjF0a.js} +6 -6
  41. package/dist/{LegalRepresentativeDetailsPage-fxFVfuS4.js → LegalRepresentativeDetailsPage-DTNqyMSY.js} +6 -6
  42. package/dist/{Link-BrhjD5PB.js → Link-B3VUK9vb.js} +2 -2
  43. package/dist/{ListItem-CFd_eKi6.js → ListItem-kxjnBth4.js} +3 -3
  44. package/dist/{LoaderWrapper-vIs9v-bF.js → LoaderWrapper-C6bG2XiY.js} +2 -2
  45. package/dist/ManageIndividualComponent-CcZHp2kp.js +46 -0
  46. package/dist/{ManageTermsOfServiceComponent-rdafMeu0.js → ManageTermsOfServiceComponent-CPWgs2f-.js} +5 -5
  47. package/dist/{ManageTransferInstrumentComponent-BPAV8xNI.js → ManageTransferInstrumentComponent-DSw_8rrv.js} +12 -15
  48. package/dist/{MaskedInput-FKbjMCcf.js → MaskedInput-BrMFt_16.js} +5 -5
  49. package/dist/{MaybeModal-DpIm1du4.js → MaybeModal-D-gW8GPv.js} +3 -3
  50. package/dist/{Modal-y1WKajuS.js → Modal-CvWAmYtX.js} +2 -2
  51. package/dist/{Name-B2sN5T7w.js → Name-DmDtaTiI.js} +5 -5
  52. package/dist/{OnboardingDropinComponent-DAgv7ZtY.js → OnboardingDropinComponent-rYJqFOes.js} +59 -61
  53. package/dist/{PayoutDetailsDropin-DUYkjwtA.js → PayoutDetailsDropin-D2IVarOc.js} +63 -61
  54. package/dist/{RadioGroup-KZagZTkQ.js → RadioGroup-CZc5Xczz.js} +2 -2
  55. package/dist/{RadioGroupCard-Vb3xY6Jd.js → RadioGroupCard-Cwqfhsho.js} +2 -2
  56. package/dist/{Review-CwKhhTUJ.js → Review-DMjwUzuo.js} +6 -8
  57. package/dist/{RootBusinessDetailsPage-BlhpFvIA.js → RootBusinessDetailsPage-C47PkI1s.js} +4 -4
  58. package/dist/{RootBusinessLinesPage-DPYb8RNj.js → RootBusinessLinesPage-bzUA8Mwm.js} +28 -34
  59. package/dist/{RootIndividualDetailsPage-DNj-gmXk.js → RootIndividualDetailsPage-BiKRFYAE.js} +8 -8
  60. package/dist/{Select-Cn8HCFO1.js → Select-BFNSmv-P.js} +4 -4
  61. package/dist/{SignPCIComponent-CfghxPD_.js → SignPCIComponent-CeqLinEZ.js} +17 -16
  62. package/dist/{SingpassSelection-TJvShg6u.js → SingpassSelection-Cz7F0Q29.js} +6 -6
  63. package/dist/{SoleProprietorshipPage-DpW2BnqX.js → SoleProprietorshipPage-Cct-BHIq.js} +4 -4
  64. package/dist/{SourceOfFundsPage-DCjD1_jQ.js → SourceOfFundsPage-CcYCif_W.js} +37 -37
  65. package/dist/{StepProgressIndicator-CTcluX6o.js → StepProgressIndicator-ct4dD8Me.js} +1 -1
  66. package/dist/{StoreProvider-2rl-plv5.js → StoreProvider-D1ipuMyA.js} +873 -206
  67. package/dist/{StructuredList-BNLhk_zV.js → StructuredList-Bh1vlAFE.js} +1 -1
  68. package/dist/{Summary-BA-RCSe5.js → Summary-C9356arT.js} +7 -8
  69. package/dist/{TaxInformationField-BkAck6oq.js → TaxInformationField-D7QHzCRA.js} +186 -210
  70. package/dist/{TaxReportingDropin-ClfyxcG1.js → TaxReportingDropin-DdP203ln.js} +15 -17
  71. package/dist/{TextArea-BBgONn8j.js → TextArea-BXMx_BYI.js} +2 -2
  72. package/dist/{TileGroup-COWNMWXf.js → TileGroup-Clf_7nDm.js} +3 -3
  73. package/dist/{TrustDetailsPage-BzldtvzC.js → TrustDetailsPage-DuW_tNHb.js} +34 -48
  74. package/dist/{TrustMemberCompanyPage-260J2i6K.js → TrustMemberCompanyPage-Bo8N1xne.js} +5 -5
  75. package/dist/{TrustMemberIndividualPage-fWJYEZYF.js → TrustMemberIndividualPage-DekDJnBs.js} +6 -6
  76. package/dist/{TrustMemberRoleAndTypePage-3X8UFjOz.js → TrustMemberRoleAndTypePage-wNY4dNJA.js} +21 -23
  77. package/dist/{TrustMembersOverview-BAt2B9lv.js → TrustMembersOverview-C2Xvs2QU.js} +10 -14
  78. package/dist/{UnincorporatedPartnershipIndividualPage-YASSfuf8.js → UnincorporatedPartnershipIndividualPage-B0KLKWlB.js} +6 -6
  79. package/dist/{UnincorporatedPartnershipMemberCompanyPage-D_ty05Bb.js → UnincorporatedPartnershipMemberCompanyPage-DGl6vdaJ.js} +5 -5
  80. package/dist/{UnincorporatedPartnershipMemberRoleAndTypePage-DEDnWDma.js → UnincorporatedPartnershipMemberRoleAndTypePage-Dqpv7MA0.js} +11 -12
  81. package/dist/{UnincorporatedPartnershipMembersOverview-DkmIW_Qf.js → UnincorporatedPartnershipMembersOverview-kSErBx1d.js} +7 -11
  82. package/dist/{VerificationErrorAlert-Dk__b2Ns.js → VerificationErrorAlert-BZQrzGH3.js} +2 -3
  83. package/dist/{ViewVerificationStatusComponent-D_5ZZo6V.js → ViewVerificationStatusComponent-DzkOSCK9.js} +3 -4
  84. package/dist/{accountHolderUtils-D78ugcQ9.js → accountHolderUtils-CfXFflVd.js} +2 -2
  85. package/dist/adyen-business-financing.js +3 -3
  86. package/dist/adyen-individual-configuration.js +3 -3
  87. package/dist/adyen-individual-status.js +3 -3
  88. package/dist/adyen-invited-decision-maker.js +86 -16
  89. package/dist/adyen-kyc-components.js +19 -47
  90. package/dist/adyen-onboarding.js +3 -3
  91. package/dist/adyen-terms-of-service-management.js +3 -3
  92. package/dist/adyen-terms-of-service-status.js +3 -3
  93. package/dist/adyen-transfer-instrument-configuration.js +3 -3
  94. package/dist/adyen-transfer-instrument-management.js +3 -3
  95. package/dist/adyen-verification-status.js +3 -3
  96. package/dist/{bafinUtils-CJIcB4Zh.js → bafinUtils-DiYEDJcs.js} +2 -2
  97. package/dist/bg-BG-BNRJzjXu.js +13 -0
  98. package/dist/{bg-BG-K7feXvEc.js → bg-BG-DbFzLQK7.js} +1 -2
  99. package/dist/{commonValidators-ziT0GvBq.js → commonValidators-CXbniCFf.js} +2 -2
  100. package/dist/cs-CZ-BMnoWiIi.js +13 -0
  101. package/dist/{cs-CZ-CYQO0o5V.js → cs-CZ-CBuNZ7UO.js} +1 -2
  102. package/dist/{da-DK-CGWvmdkq.js → da-DK-CLdNh9JT.js} +1 -2
  103. package/dist/da-DK-D17SWJin.js +13 -0
  104. package/dist/{de-DE-DHDJhahG.js → de-DE-BT5g7ZXC.js} +1 -2
  105. package/dist/de-DE-DC90bn2y.js +13 -0
  106. package/dist/{dropinUtils-DIFlH1Oh.js → dropinUtils-D9tDQoHM.js} +4 -4
  107. package/dist/el-GR-B2xt_Hn1.js +13 -0
  108. package/dist/{el-GR-DHNlnOwf.js → el-GR-BvRBuezU.js} +1 -2
  109. package/dist/{en-US-D1sB335h.js → en-US-BtFr9JRa.js} +10 -1
  110. package/dist/en-US-CfIkXJPX.js +13 -0
  111. package/dist/{en-US-DoiQhi0j.js → en-US-CgakND3H.js} +1 -2
  112. package/dist/{es-ES-CxnsKEh4.js → es-ES-4FS7NoE7.js} +1 -2
  113. package/dist/es-ES-CzG-lilL.js +13 -0
  114. package/dist/et-EE-B7OzU-54.js +13 -0
  115. package/dist/{et-EE-BQixWUEV.js → et-EE-CksV5_e1.js} +1 -2
  116. package/dist/fi-FI-DooPgPb1.js +13 -0
  117. package/dist/{fi-FI-57-xkioo.js → fi-FI-XpnJRPgt.js} +1 -2
  118. package/dist/{formUtils-CNFS-TZ-.js → formUtils-D9jeE5kM.js} +3 -18
  119. package/dist/fr-FR-29mQrnro.js +13 -0
  120. package/dist/{fr-FR-BxiX8Zfi.js → fr-FR-TqAhPvzz.js} +1 -2
  121. package/dist/{getName-Bti12K-o.js → getName-DE1OqcKC.js} +2 -2
  122. package/dist/{getProblemsForEntity-BX1inH7F.js → getProblemsForEntity-BAR090tk.js} +2 -2
  123. package/dist/hr-HR-BFu1_Xrc.js +13 -0
  124. package/dist/{hr-HR-BynZTNSB.js → hr-HR-CKZ_yuXC.js} +1 -2
  125. package/dist/{hu-HU-BtRIDozk.js → hu-HU-BEV8uVRt.js} +1 -2
  126. package/dist/hu-HU-nf030gFT.js +13 -0
  127. package/dist/{iframeWidget-JLfCMf_x.js → iframeWidget-fheON5_I.js} +4 -4
  128. package/dist/{isEmpty-OXRV2qGb.js → isEmpty-GIXtRpid.js} +2 -2
  129. package/dist/it-IT-CToDWXlu.js +13 -0
  130. package/dist/{it-IT-masgjk9F.js → it-IT-D-jYXj6V.js} +1 -2
  131. package/dist/{ja-JP-vv3-YsHU.js → ja-JP-8yMqZqF2.js} +1 -2
  132. package/dist/ja-JP-BkAEknQ-.js +13 -0
  133. package/dist/{japanSupportUtils-Co72AcSs.js → japanSupportUtils-BApmRmh9.js} +2 -2
  134. package/dist/{localizeDateString-DXp3crqk.js → localizeDateString-lEawsoMF.js} +2 -2
  135. package/dist/{lt-LT-2BMif2Bk.js → lt-LT-CK0t2AVY.js} +1 -2
  136. package/dist/lt-LT-DxzEdyVV.js +13 -0
  137. package/dist/lv-LV-D-j-4Dao.js +13 -0
  138. package/dist/{lv-LV-CHdEDRVO.js → lv-LV-JvlzK9X-.js} +1 -2
  139. package/dist/{mapExistingFile-SAc645fC.js → mapExistingFile-tU1ZIpaK.js} +4 -4
  140. package/dist/mapJpAddressSchemaToAddressLocalizations-CMb9BGdy.js +88 -0
  141. package/dist/{mapLegalEntityToIndividualSchema-yKl9QZpe.js → mapLegalEntityToIndividualSchema-BrOJLslm.js} +40 -42
  142. package/dist/{mapTransferInstrumentToPayoutAccount-BU--vaxN.js → mapTransferInstrumentToPayoutAccount-V-kZBaDU.js} +2 -2
  143. package/dist/nl-NL-C8CEGqAc.js +13 -0
  144. package/dist/{nl-NL-D1b5RUJ0.js → nl-NL-Jhr-ICkK.js} +1 -2
  145. package/dist/{no-NO-Dkh4SWbB.js → no-NO-BH6DId3q.js} +1 -2
  146. package/dist/no-NO-DbVtqyON.js +13 -0
  147. package/dist/{patternValidators-BuKCm6wv.js → patternValidators-CrizcAyn.js} +2 -2
  148. package/dist/{pl-PL-BkGihn5Q.js → pl-PL-B5c0NNHB.js} +1 -2
  149. package/dist/pl-PL-Bxtudsvi.js +13 -0
  150. package/dist/{process-field-configurations-B289w3QC.js → process-field-configurations-Dps3VSde.js} +4 -4
  151. package/dist/{pt-BR-BRdIEO2O.js → pt-BR-4Iozxvfr.js} +1 -2
  152. package/dist/pt-BR-CL4JYBNe.js +13 -0
  153. package/dist/{pt-PT-BfL7qUzo.js → pt-PT-09L8XznW.js} +1 -2
  154. package/dist/pt-PT-C-OZtnUM.js +13 -0
  155. package/dist/{resolveEnvironment-5C9O6OKL.js → resolveEnvironment-CNNiFhPM.js} +5 -5
  156. package/dist/{ro-RO-C2yBVFht.js → ro-RO-D7-7tmTR.js} +1 -2
  157. package/dist/ro-RO-Dq1NTg-A.js +13 -0
  158. package/dist/{roleMetadata-C2o-1qrX.js → roleMetadata-C4F3QW7A.js} +3 -3
  159. package/dist/sk-SK-CMvUjDgW.js +13 -0
  160. package/dist/{sk-SK-C74EF23u.js → sk-SK-D3tsz1Pg.js} +1 -2
  161. package/dist/sl-SI-BslBqaxO.js +13 -0
  162. package/dist/{sl-SI-CvUzNn9Z.js → sl-SI-Y9h1ht45.js} +1 -2
  163. package/dist/style.css +1877 -1856
  164. package/dist/styles-CLV89_hH.js +1877 -1856
  165. package/dist/{sv-SE-BsLkPEzn.js → sv-SE-DFSm22oQ.js} +1 -2
  166. package/dist/sv-SE-Dm_WHV9V.js +13 -0
  167. package/dist/types/api/companyDataSet/handleCompanyDataset.d.ts +1 -1
  168. package/dist/types/api/companySearch/useCompanySearch.d.ts +1 -1
  169. package/dist/types/api/companySelection/useCompanySelection.d.ts +2 -2
  170. package/dist/types/api/documentValidation/useDocumentValidate.d.ts +1 -0
  171. package/dist/types/api/invitedEntity/useInvitedEntityAssociationData.d.ts +7 -0
  172. package/dist/types/api/queryKeys.d.ts +2 -1
  173. package/dist/types/api/utils/getLookupBaseUrl.d.ts +9 -0
  174. package/dist/types/components/BankAccount/fields/BankAccountNumber/BankAccountNumber.d.ts +1 -1
  175. package/dist/types/components/BankAccount/fields/BankCode/BankCode.d.ts +1 -1
  176. package/dist/types/components/BankAccount/fields/BranchCode/BranchCode.d.ts +1 -1
  177. package/dist/types/components/BankAccount/fields/Iban/Iban.d.ts +1 -1
  178. package/dist/types/components/Business/forms/rules.d.ts +4 -1
  179. package/dist/types/components/Business/tasks/BusinessDetailsDropin/types.d.ts +14 -1
  180. package/dist/types/components/Business/utils/applyVerifiedBusinessData.d.ts +1 -1
  181. package/dist/types/components/Business/utils/submit.d.ts +1 -1
  182. package/dist/types/components/Business/utils/useCompanySearchExperiments.d.ts +6 -0
  183. package/dist/types/components/BusinessLines/fields/SctaField/types.d.ts +1 -1
  184. package/dist/types/components/Contract/tasks/PciDropin/PciDropin.d.ts +1 -1
  185. package/dist/types/components/EFP/fields/NaceCodeField/types.d.ts +1 -1
  186. package/dist/types/components/EFP/tasks/BusinessFinancingDropin/BusinessFinancingSummary.d.ts +14 -0
  187. package/dist/types/components/EFP/tasks/BusinessFinancingDropin/types.d.ts +1 -3
  188. package/dist/types/components/EmbeddedDropins/BusinessFinancingComponent/utils.d.ts +1 -2
  189. package/dist/types/components/EmbeddedDropins/CreateIndividualComponent/CreateIndividualComponent.d.ts +2 -2
  190. package/dist/types/components/Individual/fields/DriversLicense/DriversLicense.d.ts +1 -1
  191. package/dist/types/components/Individual/fields/DriversLicense/DriversLicense.types.d.ts +1 -0
  192. package/dist/types/components/Individual/fields/IdentityNumber/IdentityNumber.d.ts +1 -1
  193. package/dist/types/components/Individual/forms/IdVerificationMethod/{individualOnfidoConflictsSchema.d.ts → individualConflictsSchema.d.ts} +12 -12
  194. package/dist/types/components/Individual/forms/IdVerificationMethod/mapExtractionResultToSchema.d.ts +2 -2
  195. package/dist/types/components/Individual/forms/Individual.d.ts +7 -7
  196. package/dist/types/components/Individual/forms/Individual.rules.d.ts +3 -3
  197. package/dist/types/components/Individual/forms/Individual.types.d.ts +13 -5
  198. package/dist/types/components/Individual/forms/form-ids.d.ts +2 -2
  199. package/dist/types/components/Individual/helpers/bafinUtils.d.ts +2 -2
  200. package/dist/types/components/Individual/helpers/mandateIdVerificationForMotionCapture.d.ts +2 -2
  201. package/dist/types/components/Individual/helpers/roleUtils.d.ts +2 -2
  202. package/dist/types/components/Individual/mapping/individualKeyMappings.d.ts +6 -6
  203. package/dist/types/components/Individual/mapping/mapApiDocumentToIndividualDocuments.d.ts +2 -2
  204. package/dist/types/components/Individual/mapping/mapIndividualDocumentToApiDocument.d.ts +2 -2
  205. package/dist/types/components/Individual/mapping/mapIndividualSchemaToLegalEntity.d.ts +2 -2
  206. package/dist/types/components/Individual/mapping/mapLegalEntityToIndividualSchema.d.ts +2 -2
  207. package/dist/types/components/Individual/pages/DecisionMakerDetailsPage.d.ts +2 -2
  208. package/dist/types/components/Individual/pages/LegalRepresentativeDetailsPage.d.ts +2 -2
  209. package/dist/types/components/Individual/pages/RootIndividualDetailsPage.d.ts +2 -2
  210. package/dist/types/components/Individual/tasks/DecisionMakers/DecisionMakerDetails/utils.d.ts +3 -3
  211. package/dist/types/components/Individual/tasks/DecisionMakers/InvitedDecisionMaker/InvitedDecisionMakerGettingStarted/InvitedDecisionMakerGettingStarted.d.ts +4 -0
  212. package/dist/types/components/Individual/tasks/DecisionMakers/InvitedDecisionMaker/InvitedDecisionMakerSubmitSuccess/InvitedDecisionMakerSubmitSuccess.d.ts +1 -0
  213. package/dist/types/components/Individual/tasks/IndividualDropin/IndividualDropin.d.ts +2 -2
  214. package/dist/types/components/Individual/tasks/IndividualDropin/individualFormConfig.d.ts +3 -3
  215. package/dist/types/components/Shared/FormFlow/FormFlow.d.ts +1 -1
  216. package/dist/types/components/Shared/FormFlow/FormFlow.types.d.ts +2 -0
  217. package/dist/types/components/Shared/NewSummary/NewSummary.d.ts +14 -0
  218. package/dist/types/components/Shared/Summary/Summary.d.ts +1 -0
  219. package/dist/types/components/Shared/fields/BusinessRegistrationNumberField/BusinessRegistrationNumberField.d.ts +1 -1
  220. package/dist/types/components/Shared/fields/BusinessRegistrationNumberField/fieldConfig.d.ts +0 -2
  221. package/dist/types/components/Shared/fields/BusinessRegistrationNumberField/types.d.ts +3 -1
  222. package/dist/types/components/Shared/fields/EInvoicingCodeField/EInvoicingCodeField.d.ts +1 -1
  223. package/dist/types/components/Shared/fields/EInvoicingCodeField/types.d.ts +1 -1
  224. package/dist/types/components/Shared/fields/IdFieldTypeSelector/TaxIdNumberTypeSelector.d.ts +8 -14
  225. package/dist/types/components/Shared/fields/IndustryCodeField/types.d.ts +1 -1
  226. package/dist/types/components/Shared/fields/LocalizedLegalCompanyNameField/fieldConfig.d.ts +4 -4
  227. package/dist/types/components/Shared/fields/StockExchangeMICField/StockExchangeMICField.d.ts +1 -1
  228. package/dist/types/components/Shared/fields/StockExchangeMICField/types.d.ts +1 -1
  229. package/dist/types/components/Shared/fields/StockISINField/StockISINField.d.ts +1 -1
  230. package/dist/types/components/Shared/fields/StockISINField/types.d.ts +1 -1
  231. package/dist/types/components/Shared/fields/StockTickerSymbol/StockTickerSymbolField.d.ts +1 -1
  232. package/dist/types/components/Shared/fields/StockTickerSymbol/types.d.ts +1 -1
  233. package/dist/types/components/Shared/fields/TaxInformationField/TaxInformationField.d.ts +1 -1
  234. package/dist/types/components/Shared/fields/TaxInformationField/types.d.ts +1 -1
  235. package/dist/types/components/Shared/fields/TaxInformationField/utils.d.ts +13 -0
  236. package/dist/types/components/Shared/fields/VatNumberField/VatNumberField.d.ts +1 -1
  237. package/dist/types/components/Shared/fields/VatNumberField/types.d.ts +1 -1
  238. package/dist/types/components/Shared/forms/Address/utils.d.ts +1 -1
  239. package/dist/types/components/Trust/pages/TrustMemberIndividualPage.d.ts +2 -2
  240. package/dist/types/components/UnincorporatedPartnership/pages/UnincorporatedPartnershipIndividualPage.d.ts +2 -2
  241. package/dist/types/components/ui/atoms/Select/Select.d.ts +1 -1
  242. package/dist/types/context/ExperimentContext/types.d.ts +5 -2
  243. package/dist/types/context/StateContext/types.d.ts +2 -2
  244. package/dist/types/embeds/individual-configuration/adyen-individual-configuration.types.d.ts +2 -2
  245. package/dist/types/hooks/useForm/types.d.ts +0 -3
  246. package/dist/types/hooks/useUboQuestionnaire.d.ts +1 -1
  247. package/dist/types/language/types.d.ts +1 -1
  248. package/dist/types/language/utils.d.ts +3 -2
  249. package/dist/types/stores/formState.d.ts +2 -2
  250. package/dist/types/utils/entityStatusUtil.d.ts +1 -1
  251. package/dist/types/utils/fieldConfigurations.d.ts +5 -5
  252. package/dist/types/utils/formUtils.d.ts +2 -4
  253. package/dist/types/utils/getDisplayErrorMessage.d.ts +2 -2
  254. package/dist/types/utils/getFieldsWithExistingData.d.ts +2 -2
  255. package/dist/types/utils/textTransformation/toFullWidth.d.ts +2 -3
  256. package/dist/{types-DBaOva2_.js → types-CBmMyrfq.js} +2 -2
  257. package/dist/types-CQ2p58-6.js +36 -0
  258. package/dist/{types-BnDQ6S_S.js → types-CTdbVdJz.js} +2 -2
  259. package/dist/{types-BW4HQI5X.js → types-D1PsvtzF.js} +7 -4
  260. package/dist/{types-DEOqe9wP.js → types-DAo28llI.js} +2 -2
  261. package/dist/unincorporated-partnership-D8XzcFAz.js +17 -0
  262. package/dist/{useAssociatedLegalEntity-CgCHuC7s.js → useAssociatedLegalEntity-CcBas4Z6.js} +2 -2
  263. package/dist/{useBusinessDetailsData-BHwHp3lk.js → useBusinessDetailsData-C5NRRPZO.js} +225 -223
  264. package/dist/{useBusinessLines-VpNdSmkM.js → useBusinessLines-W_tVz7b2.js} +2 -2
  265. package/dist/{useCanSeeIntroduction-BHxmXYYO.js → useCanSeeIntroduction-CY2DRUd9.js} +3 -3
  266. package/dist/{useCreateLegalEntity-afT__j7Q.js → useCreateLegalEntity-DvgdyAEv.js} +2 -2
  267. package/dist/{useDataMissingRemediations-BbKOIyd3.js → useDataMissingRemediations-bg2NClQ0.js} +2 -2
  268. package/dist/{useDeleteTransferInstrument-BDKsAGlv.js → useDeleteTransferInstrument-DPqu2eMq.js} +3 -3
  269. package/dist/{useForm-Dpiyw6Md.js → useForm-4KUz1bgp.js} +3 -3
  270. package/dist/{useFormContext-DuIAV1IO.js → useFormContext-D45m0BQr.js} +9 -8
  271. package/dist/{useGlobalData-CAxZyB0c.js → useGlobalData-M7ZBslxx.js} +2 -2
  272. package/dist/{useMultiForm-OnNcru5A.js → useMultiForm-CkSiaDSG.js} +4 -4
  273. package/dist/{useNavigate-Csyylapb.js → useNavigate-CLKHHcts.js} +30 -30
  274. package/dist/{useOnboardingStatus-D-MOei3W.js → useOnboardingStatus-BZ_ql9fP.js} +2 -2
  275. package/dist/{usePciQuestionnaireList-B0DMLOq-.js → usePciQuestionnaireList-Bs_Uf9EO.js} +2 -2
  276. package/dist/{useSalesChannels-3bkByPI7.js → useSalesChannels-BecKhMez.js} +4 -4
  277. package/dist/{useScenarios-Dgegi_R_.js → useScenarios-C7CWBSDD.js} +2 -2
  278. package/dist/{useTaskStatus-Cm1yZ1mq.js → useTaskStatus-U26ON8gf.js} +2 -2
  279. package/dist/{useTermsOfServiceStatus-CJw8hWCa.js → useTermsOfServiceStatus-B6l2oGqe.js} +2 -2
  280. package/dist/{useToastContext-DrAgxHEK.js → useToastContext-hg-I2QHv.js} +2 -2
  281. package/dist/{useTrustMembers-CoYK-ddb.js → useTrustMembers-DIjXnzcd.js} +4 -4
  282. package/dist/{useUnincorporatedPartnershipMembers-CG1s17Ko.js → useUnincorporatedPartnershipMembers-C5PGuXkU.js} +5 -5
  283. package/dist/{useUpdateBusinessLines-BOiNRvpa.js → useUpdateBusinessLines-DPxvEffO.js} +5 -5
  284. package/dist/{useUpdateLegalEntity-CxXQbqdN.js → useUpdateLegalEntity-BEYwHoQO.js} +3 -3
  285. package/dist/{utils-Di5ZPizP.js → utils-BSY959c4.js} +2 -2
  286. package/dist/{utils-SSHuQH95.js → utils-CbHXByzU.js} +5 -5
  287. package/dist/{utils-0SrqDXVO.js → utils-D8uJzSlS.js} +3 -3
  288. package/dist/{utils-CYdFoqsI.js → utils-Da3grEI2.js} +2 -2
  289. package/dist/{utils-yElwanzp.js → utils-yUG9WObg.js} +2 -2
  290. package/dist/{validate-Cd2gOwkx.js → validate-BaypoH5n.js} +3 -3
  291. package/dist/{validate-DGFjwtXb.js → validate-CmpunQ80.js} +2 -2
  292. package/dist/{validationError-BIQwQynW.js → validationError-DKWrNd9x.js} +3 -3
  293. package/package.json +28 -25
  294. package/dist/Accordion-DwhJ6dID.js +0 -88
  295. package/dist/Alert-C0Uk8vQL.js +0 -169
  296. package/dist/DropinLayout-CBP_cHLC.js +0 -17
  297. package/dist/Header-B-wXVUdY.js +0 -83
  298. package/dist/ManageIndividualComponent-Br0VJtX6.js +0 -46
  299. package/dist/TaskVerificationStatus-dcodYxh1.js +0 -129
  300. package/dist/bg-BG-6XzbmxcW.js +0 -13
  301. package/dist/cs-CZ-C6vEQ8P9.js +0 -13
  302. package/dist/da-DK-DzcTI92X.js +0 -13
  303. package/dist/datasetUtil-BHQp0-xL.js +0 -58
  304. package/dist/de-DE-dPfrbCii.js +0 -13
  305. package/dist/el-GR-Dazirlmt.js +0 -13
  306. package/dist/en-US-cVpRgdC8.js +0 -13
  307. package/dist/es-ES--IvNed_Q.js +0 -13
  308. package/dist/et-EE-CsTXSlnY.js +0 -13
  309. package/dist/fi-FI-BUixKfXH.js +0 -13
  310. package/dist/fr-FR-BM-qNLci.js +0 -13
  311. package/dist/hr-HR-BF74vdPD.js +0 -13
  312. package/dist/hu-HU-DYhMVR_c.js +0 -13
  313. package/dist/it-IT-D63gRTDc.js +0 -13
  314. package/dist/ja-JP-DL0IjTzn.js +0 -13
  315. package/dist/lt-LT-BX8dOAzK.js +0 -13
  316. package/dist/lv-LV-dA8yYdKe.js +0 -13
  317. package/dist/mapJpAddressSchemaToAddressLocalizations-Xj0Z0De4.js +0 -162
  318. package/dist/nl-NL-KQ6bciOb.js +0 -13
  319. package/dist/no-NO-Ds3VioxT.js +0 -13
  320. package/dist/pl-PL-BgbxWHGE.js +0 -13
  321. package/dist/pt-BR-Ct4s4jXV.js +0 -13
  322. package/dist/pt-PT-DBEsmXQX.js +0 -13
  323. package/dist/ro-RO-C00Ig8CL.js +0 -13
  324. package/dist/sk-SK-BbJWayDh.js +0 -13
  325. package/dist/sl-SI-hxwQIw_i.js +0 -13
  326. package/dist/sv-SE-0PQ-U1u6.js +0 -13
  327. package/dist/unincorporated-partnership-MeN1dp53.js +0 -97
  328. package/dist/useDataset-DorBN2cW.js +0 -76
  329. package/dist/useSetting-DW9rg-sF.js +0 -19
package/dist/style.css CHANGED
@@ -502,2214 +502,2367 @@
502
502
  opacity: 1;
503
503
  }
504
504
  }
505
- .adyen-kyc-u-display-flex {
506
- display: flex !important;
505
+ .adyen-kyc-accordion,
506
+ .adyen-kyc-accordion-summary {
507
+ color: var(--adyen-internal-color-label-primary);
508
+ font-size: var(--adyen-internal-text-body-font-size);
509
+ font-family: var(--adyen-internal-text-body-font-family);
510
+ line-height: var(--adyen-internal-text-body-line-height);
511
+ cursor: pointer;
507
512
  }
508
513
 
509
- .adyen-kyc-u-display-inline-flex {
510
- display: inline-flex !important;
514
+ .adyen-kyc-accordion {
515
+ background: none;
516
+ border-radius: var(--adyen-internal-border-radius-l);
517
+ margin-bottom: var(--adyen-internal-spacer-050);
511
518
  }
512
519
 
513
- .adyen-kyc-u-flex-direction-row {
514
- flex-direction: row !important;
520
+ .adyen-kyc-accordion-basic {
521
+ background-color: var(--adyen-internal-color-background-secondary);
515
522
  }
516
-
517
- .adyen-kyc-u-flex-direction-row-reverse {
518
- flex-direction: row-reverse !important;
523
+ .adyen-kyc-accordion-info {
524
+ background-color: var(--adyen-internal-color-background-highlight-weak);
519
525
  }
520
-
521
- .adyen-kyc-u-flex-direction-column {
522
- flex-direction: column !important;
526
+ .adyen-kyc-accordion-error {
527
+ background-color: var(--adyen-internal-color-background-critical-weak);
523
528
  }
524
-
525
- .adyen-kyc-u-flex-direction-column-reverse {
526
- flex-direction: column-reverse !important;
529
+ .adyen-kyc-accordion-warning {
530
+ background-color: var(--adyen-internal-color-background-warning-weak);
527
531
  }
528
-
529
- .adyen-kyc-u-flex-wrap-wrap {
530
- flex-wrap: wrap !important;
532
+ .adyen-kyc-accordion-success {
533
+ background-color: var(--adyen-internal-color-background-success-weak);
531
534
  }
532
-
533
- .adyen-kyc-u-flex-wrap-nowrap {
534
- flex-wrap: nowrap !important;
535
+ .adyen-kyc-accordion-narrow .adyen-kyc-accordion-summary {
536
+ padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-070);
535
537
  }
536
-
537
- .adyen-kyc-u-align-items-start {
538
- align-items: start !important;
538
+ .adyen-kyc-accordion-narrow .adyen-kyc-accordion-content {
539
+ padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-070)
540
+ var(--adyen-internal-spacer-060);
539
541
  }
540
-
541
- .adyen-kyc-u-align-items-flex-start {
542
- align-items: flex-start !important;
542
+ .adyen-kyc-accordion-with-icon .adyen-kyc-accordion-content {
543
+ margin-left: var(--adyen-internal-spacer-080);
543
544
  }
544
545
 
545
- .adyen-kyc-u-align-items-flex-end {
546
- align-items: flex-end !important;
546
+ .adyen-kyc-accordion-summary {
547
+ display: flex;
548
+ align-items: center;
549
+ gap: var(--adyen-internal-spacer-050);
550
+ padding: var(--adyen-internal-spacer-080);
551
+ font-weight: var(--adyen-internal-text-title-font-weight);
552
+ transition: margin 150ms ease-out;
553
+ margin-bottom: var(--adyen-internal-spacer-000);
554
+ border-radius: var(--adyen-internal-border-radius-l);
547
555
  }
548
556
 
549
- .adyen-kyc-u-align-items-center {
550
- align-items: center !important;
557
+ .adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow {
558
+ cursor: pointer;
559
+ user-select: none;
560
+ height: 1em;
551
561
  }
552
562
 
553
- .adyen-kyc-u-align-items-stretch {
554
- align-items: stretch !important;
563
+ .adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow-right {
564
+ margin-left: auto;
565
+ margin-right: var(--adyen-internal-spacer-050);
555
566
  }
556
567
 
557
- .adyen-kyc-u-align-items-baseline {
558
- align-items: baseline !important;
568
+ .adyen-kyc-accordion[open] .adyen-kyc-accordion-arrow {
569
+ transform: rotate(-180deg);
559
570
  }
560
-
561
- .adyen-kyc-u-align-items-end {
562
- align-items: end !important;
571
+ .adyen-kyc-accordion summary::-webkit-details-marker {
572
+ display: none;
563
573
  }
564
574
 
565
- .adyen-kyc-u-justify-content-center {
566
- justify-content: center !important;
575
+ .adyen-kyc-accordion-content {
576
+ cursor: auto;
577
+ padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-080)
578
+ var(--adyen-internal-spacer-080);
579
+ user-select: none;
580
+ display: flex;
581
+ flex-direction: column;
582
+ gap: var(--adyen-internal-spacer-040);
567
583
  }
568
584
 
569
- .adyen-kyc-u-justify-content-flex-start {
570
- justify-content: flex-start !important;
585
+ .adyen-kyc-accordion[open] summary {
586
+ margin-bottom: var(--adyen-internal-spacer-020);
587
+ user-select: auto;
571
588
  }
572
-
573
- .adyen-kyc-u-justify-content-flex-end {
574
- justify-content: flex-end !important;
589
+ .adyen-kyc-alert {
590
+ border-radius: var(--adyen-internal-border-radius-m);
591
+ padding: var(--adyen-internal-spacer-070);
592
+ word-break: break-word;
593
+ display: flex;
594
+ flex-direction: column;
595
+ gap: var(--adyen-internal-spacer-040);
596
+ text-align: left;
575
597
  }
576
-
577
- .adyen-kyc-u-justify-content-start {
578
- justify-content: start !important;
598
+ .adyen-kyc-alert-without-icon .adyen-kyc-alert-explanation,
599
+ .adyen-kyc-alert-without-icon .adyen-kyc-alert-actions {
600
+ margin: 0 var(--adyen-internal-spacer-070);
579
601
  }
580
602
 
581
- .adyen-kyc-u-justify-content-end {
582
- justify-content: end !important;
603
+ .adyen-kyc-alert-basic {
604
+ background-color: var(--adyen-internal-color-background-secondary);
583
605
  }
584
606
 
585
- .adyen-kyc-u-justify-content-left {
586
- justify-content: left !important;
607
+ .adyen-kyc-alert-info {
608
+ background-color: var(--adyen-internal-color-background-highlight-weak);
587
609
  }
588
610
 
589
- .adyen-kyc-u-justify-content-right {
590
- justify-content: right !important;
611
+ .adyen-kyc-alert-error {
612
+ background-color: var(--adyen-internal-color-background-critical-weak);
591
613
  }
592
614
 
593
- .adyen-kyc-u-justify-content-space-between {
594
- justify-content: space-between !important;
615
+ .adyen-kyc-alert-warning {
616
+ background-color: var(--adyen-internal-color-background-warning-weak);
595
617
  }
596
618
 
597
- .adyen-kyc-u-justify-content-space-around {
598
- justify-content: space-around !important;
619
+ .adyen-kyc-alert-success {
620
+ background-color: var(--adyen-internal-color-background-success-weak);
599
621
  }
600
622
 
601
- .adyen-kyc-u-justify-content-space-evenly {
602
- justify-content: space-evenly !important;
623
+ .adyen-kyc-alert-header {
624
+ align-items: flex-start;
625
+ display: flex;
603
626
  }
604
627
 
605
- .adyen-kyc-u-justify-content-stretch {
606
- justify-content: stretch !important;
628
+ .adyen-kyc-alert-header-without-children {
629
+ align-items: center;
607
630
  }
608
631
 
609
- .adyen-kyc-u-flex-1 {
610
- flex: 1 !important;
632
+ .adyen-kyc-alert-icon {
633
+ line-height: var(--adyen-internal-text-body-line-height);
634
+ margin-top: var(--adyen-internal-spacer-010);
611
635
  }
612
-
613
- .adyen-kyc-u-flex-2 {
614
- flex: 2 !important;
636
+ .adyen-kyc-alert-icon-info {
637
+ color: var(--adyen-internal-color-background-highlight-strong);
615
638
  }
616
639
 
617
- .adyen-kyc-u-flex-3 {
618
- flex: 3 !important;
640
+ .adyen-kyc-alert-icon-error {
641
+ color: var(--adyen-internal-color-background-critical-strong);
619
642
  }
620
643
 
621
- .adyen-kyc-u-flex-4 {
622
- flex: 4 !important;
644
+ .adyen-kyc-alert-icon-warning {
645
+ color: var(--adyen-internal-color-background-warning-strong);
623
646
  }
624
647
 
625
- .adyen-kyc-u-margin-auto {
626
- margin: auto !important;
648
+ .adyen-kyc-alert-icon-success {
649
+ color: var(--adyen-internal-color-background-success-strong);
627
650
  }
628
651
 
629
- .adyen-kyc-u-margin-bottom-auto {
630
- margin-bottom: auto !important;
652
+ .adyen-kyc-alert-title {
653
+ flex-grow: 1;
654
+ margin-left: var(--adyen-internal-spacer-070);
631
655
  }
632
656
 
633
- .adyen-kyc-u-margin-left-auto {
634
- margin-left: auto !important;
657
+ .adyen-kyc-alert-explanation {
658
+ color: var(--adyen-internal-color-label-primary);
659
+ font-size: var(--adyen-internal-text-body-font-size);
660
+ margin: 0 var(--adyen-internal-spacer-100);
635
661
  }
636
662
 
637
- .adyen-kyc-u-margin-right-auto {
638
- margin-right: auto !important;
663
+ .adyen-kyc-alert-actions {
664
+ display: flex;
665
+ gap: var(--adyen-internal-spacer-070);
666
+ text-align: left;
639
667
  }
640
-
641
- .adyen-kyc-u-margin-top-auto {
642
- margin-top: auto !important;
668
+ /* for container queries */
669
+ .adyen-kyc-stack-layout {
670
+ display: flex;
671
+ flex-direction: column;
643
672
  }
644
673
 
645
- .adyen-kyc-u-margin-x-auto {
646
- margin-left: auto !important;
647
- margin-right: auto !important;
674
+ .adyen-kyc-stack-layout-gap-xs {
675
+ gap: var(--adyen-internal-spacer-020);
648
676
  }
649
677
 
650
- .adyen-kyc-u-margin-y-auto {
651
- margin-bottom: auto !important;
652
- margin-top: auto !important;
678
+ .adyen-kyc-stack-layout-gap-s {
679
+ gap: var(--adyen-internal-spacer-040);
653
680
  }
654
681
 
655
- .adyen-kyc-u-margin-0 {
656
- margin: var(--adyen-internal-spacer-000, 0px) !important;
682
+ .adyen-kyc-stack-layout-gap-m {
683
+ gap: var(--adyen-internal-spacer-070);
657
684
  }
658
685
 
659
- .adyen-kyc-u-margin-bottom-0 {
660
- margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;
686
+ .adyen-kyc-stack-layout-gap-l {
687
+ gap: var(--adyen-internal-spacer-100);
661
688
  }
662
689
 
663
- .adyen-kyc-u-margin-left-0 {
664
- margin-left: var(--adyen-internal-spacer-000, 0px) !important;
690
+ .adyen-kyc-stack-layout-gap-xl {
691
+ gap: var(--adyen-internal-spacer-140);
665
692
  }
666
693
 
667
- .adyen-kyc-u-margin-right-0 {
668
- margin-right: var(--adyen-internal-spacer-000, 0px) !important;
694
+ .adyen-kyc-stack-layout-left {
695
+ align-items: flex-start;
669
696
  }
670
697
 
671
- .adyen-kyc-u-margin-top-0 {
672
- margin-top: var(--adyen-internal-spacer-000, 0px) !important;
698
+ .adyen-kyc-stack-layout-center {
699
+ align-items: center;
673
700
  }
674
701
 
675
- .adyen-kyc-u-margin-x-0 {
676
- margin-left: var(--adyen-internal-spacer-000, 0px) !important;
677
- margin-right: var(--adyen-internal-spacer-000, 0px) !important;
702
+ .adyen-kyc-stack-layout-right {
703
+ align-items: flex-end;
678
704
  }
679
705
 
680
- .adyen-kyc-u-margin-y-0 {
681
- margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;
682
- margin-top: var(--adyen-internal-spacer-000, 0px) !important;
706
+ .adyen-kyc-stack-layout-item {
707
+ flex-grow: 1;
708
+ width: 100%;
683
709
  }
684
710
 
685
- .adyen-kyc-u-margin-2 {
686
- margin: var(--adyen-internal-spacer-010, 2px) !important;
711
+ @container main (min-width: 480px) {
712
+ .adyen-kyc-stack-layout-horizontal {
713
+ align-items: flex-start;
714
+ flex-direction: row;
715
+ }
716
+ .adyen-kyc-stack-layout-left-horizontal {
717
+ justify-content: flex-start;
718
+ }
719
+ .adyen-kyc-stack-layout-center-horizontal {
720
+ justify-content: center;
721
+ }
722
+ .adyen-kyc-stack-layout-right-horizontal {
723
+ justify-content: flex-end;
724
+ }
725
+ }/* for container queries */
726
+ .adyen-kyc-status {
727
+ align-items: center;
728
+ border-radius: var(--adyen-internal-border-radius-xl);
729
+ display: inline-flex;
730
+ padding: var(--adyen-internal-spacer-020);
687
731
  }
688
732
 
689
- .adyen-kyc-u-margin-bottom-2 {
690
- margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;
733
+ .adyen-kyc-status-icon {
734
+ height: 18px;
735
+ width: 18px;
736
+ padding: 1px;
691
737
  }
692
738
 
693
- .adyen-kyc-u-margin-left-2 {
694
- margin-left: var(--adyen-internal-spacer-010, 2px) !important;
739
+ .adyen-kyc-status-icon svg {
740
+ height: 16px;
741
+ width: 16px;
695
742
  }
696
743
 
697
- .adyen-kyc-u-margin-right-2 {
698
- margin-right: var(--adyen-internal-spacer-010, 2px) !important;
744
+ .adyen-kyc-status-text {
745
+ font-size: var(--adyen-internal-text-caption-font-size);
746
+ font-weight: var(--adyen-internal-text-caption-stronger-font-weight);
747
+ line-height: var(--adyen-internal-text-caption-line-height);
748
+ padding-left: var(--adyen-internal-spacer-020);
749
+ padding-right: var(--adyen-internal-spacer-020);
699
750
  }
700
751
 
701
- .adyen-kyc-u-margin-top-2 {
702
- margin-top: var(--adyen-internal-spacer-010, 2px) !important;
752
+ @container main (max-width: 480px) {
753
+ .adyen-kyc-status-text-responsive {
754
+ display: none;
755
+ }
703
756
  }
704
757
 
705
- .adyen-kyc-u-margin-x-2 {
706
- margin-left: var(--adyen-internal-spacer-010, 2px) !important;
707
- margin-right: var(--adyen-internal-spacer-010, 2px) !important;
758
+ .adyen-kyc-status-neutral {
759
+ background-color: var(--adyen-internal-color-background-secondary);
760
+ color: var(--adyen-internal-color-label-disabled);
761
+ fill: var(--adyen-internal-color-label-disabled);
708
762
  }
709
763
 
710
- .adyen-kyc-u-margin-y-2 {
711
- margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;
712
- margin-top: var(--adyen-internal-spacer-010, 2px) !important;
764
+ .adyen-kyc-status-neutral .adyen-kyc-status-text {
765
+ color: var(--adyen-internal-color-label-secondary);
713
766
  }
714
767
 
715
- .adyen-kyc-u-margin-4 {
716
- margin: var(--adyen-internal-spacer-020, 4px) !important;
768
+ .adyen-kyc-status-error {
769
+ background-color: var(--adyen-internal-color-background-secondary);
770
+ color: var(--adyen-internal-color-label-critical);
771
+ fill: var(--adyen-internal-color-label-critical);
717
772
  }
718
773
 
719
- .adyen-kyc-u-margin-bottom-4 {
720
- margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;
774
+ .adyen-kyc-status-warning {
775
+ background-color: var(--adyen-internal-color-background-warning-weak);
776
+ color: var(--adyen-internal-color-label-warning);
777
+ fill: var(--adyen-internal-color-label-warning);
721
778
  }
722
779
 
723
- .adyen-kyc-u-margin-left-4 {
724
- margin-left: var(--adyen-internal-spacer-020, 4px) !important;
780
+ .adyen-kyc-status-success {
781
+ background-color: var(--adyen-internal-color-background-success-weak);
725
782
  }
726
783
 
727
- .adyen-kyc-u-margin-right-4 {
728
- margin-right: var(--adyen-internal-spacer-020, 4px) !important;
784
+ .adyen-kyc-status-success .adyen-kyc-status-text {
785
+ color: var(--adyen-internal-color-label-primary);
729
786
  }
730
787
 
731
- .adyen-kyc-u-margin-top-4 {
732
- margin-top: var(--adyen-internal-spacer-020, 4px) !important;
788
+ .adyen-kyc-status-success .adyen-kyc-status-icon {
789
+ color: var(--adyen-internal-color-label-success);
790
+ fill: var(--adyen-internal-color-label-success);
791
+ }.adyen-kyc-header {
792
+ display: flex;
793
+ flex-direction: column;
794
+ gap: var(--adyen-internal-spacer-070);
733
795
  }
734
796
 
735
- .adyen-kyc-u-margin-x-4 {
736
- margin-left: var(--adyen-internal-spacer-020, 4px) !important;
737
- margin-right: var(--adyen-internal-spacer-020, 4px) !important;
797
+ .adyen-kyc-header-margin {
798
+ margin-bottom: var(--adyen-internal-spacer-140);
738
799
  }
739
800
 
740
- .adyen-kyc-u-margin-y-4 {
741
- margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;
742
- margin-top: var(--adyen-internal-spacer-020, 4px) !important;
801
+ .adyen-kyc-header-margin-secondary {
802
+ margin-bottom: var(--adyen-internal-spacer-100);
743
803
  }
744
804
 
745
- .adyen-kyc-u-margin-6 {
746
- margin: var(--adyen-internal-spacer-030, 6px) !important;
805
+ .adyen-kyc-header-left {
806
+ align-items: flex-start;
807
+ text-align: left;
747
808
  }
748
809
 
749
- .adyen-kyc-u-margin-bottom-6 {
750
- margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;
810
+ .adyen-kyc-header-center {
811
+ align-items: center;
812
+ text-align: center;
751
813
  }
752
814
 
753
- .adyen-kyc-u-margin-left-6 {
754
- margin-left: var(--adyen-internal-spacer-030, 6px) !important;
815
+ .adyen-kyc-header-right {
816
+ align-items: flex-end;
817
+ text-align: right;
755
818
  }
756
819
 
757
- .adyen-kyc-u-margin-right-6 {
758
- margin-right: var(--adyen-internal-spacer-030, 6px) !important;
820
+ .adyen-kyc-header-content {
821
+ display: flex;
822
+ flex-direction: column;
823
+ gap: var(--adyen-internal-spacer-040);
759
824
  }
760
825
 
761
- .adyen-kyc-u-margin-top-6 {
762
- margin-top: var(--adyen-internal-spacer-030, 6px) !important;
826
+ .adyen-kyc-header-actions {
827
+ max-width: 300px;
763
828
  }
764
829
 
765
- .adyen-kyc-u-margin-x-6 {
766
- margin-left: var(--adyen-internal-spacer-030, 6px) !important;
767
- margin-right: var(--adyen-internal-spacer-030, 6px) !important;
830
+ .adyen-kyc-header-title {
831
+ color: var(--adyen-internal-color-label-primary);
832
+ margin: 0;
768
833
  }
769
834
 
770
- .adyen-kyc-u-margin-y-6 {
771
- margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;
772
- margin-top: var(--adyen-internal-spacer-030, 6px) !important;
835
+ .adyen-kyc-header-title-primary {
836
+ font-size: var(--adyen-internal-text-title-l-font-size);
837
+ font-family: var(--adyen-internal-text-title-l-font-family);
838
+ font-weight: var(--adyen-internal-text-title-l-font-weight);
839
+ line-height: var(--adyen-internal-text-title-l-line-height);
773
840
  }
774
841
 
775
- .adyen-kyc-u-margin-8 {
776
- margin: var(--adyen-internal-spacer-040, 8px) !important;
842
+ .adyen-kyc-header-title-secondary {
843
+ font-size: var(--adyen-internal-text-title-font-size);
844
+ font-family: var(--adyen-internal-text-title-font-family);
845
+ font-weight: var(--adyen-internal-text-title-font-weight);
777
846
  }
778
847
 
779
- .adyen-kyc-u-margin-bottom-8 {
780
- margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;
848
+ .adyen-kyc-header-description {
849
+ font-size: var(--adyen-internal-text-body-font-size);
850
+ font-family: var(--adyen-internal-text-body-font-family);
851
+ font-weight: var(--adyen-internal-text-body-font-weight);
852
+ line-height: var(--adyen-internal-text-body-line-height);
781
853
  }
782
854
 
783
- .adyen-kyc-u-margin-left-8 {
784
- margin-left: var(--adyen-internal-spacer-040, 8px) !important;
855
+ .adyen-kyc-header-description-primary {
856
+ color: var(--adyen-internal-color-label-primary);
785
857
  }
786
858
 
787
- .adyen-kyc-u-margin-right-8 {
788
- margin-right: var(--adyen-internal-spacer-040, 8px) !important;
859
+ .adyen-kyc-header-description-secondary {
860
+ color: var(--adyen-internal-color-label-secondary);
861
+ }
862
+ .adyen-kyc-u-display-flex {
863
+ display: flex !important;
789
864
  }
790
865
 
791
- .adyen-kyc-u-margin-top-8 {
792
- margin-top: var(--adyen-internal-spacer-040, 8px) !important;
866
+ .adyen-kyc-u-display-inline-flex {
867
+ display: inline-flex !important;
793
868
  }
794
869
 
795
- .adyen-kyc-u-margin-x-8 {
796
- margin-left: var(--adyen-internal-spacer-040, 8px) !important;
797
- margin-right: var(--adyen-internal-spacer-040, 8px) !important;
870
+ .adyen-kyc-u-flex-direction-row {
871
+ flex-direction: row !important;
798
872
  }
799
873
 
800
- .adyen-kyc-u-margin-y-8 {
801
- margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;
802
- margin-top: var(--adyen-internal-spacer-040, 8px) !important;
874
+ .adyen-kyc-u-flex-direction-row-reverse {
875
+ flex-direction: row-reverse !important;
803
876
  }
804
877
 
805
- .adyen-kyc-u-margin-10 {
806
- margin: var(--adyen-internal-spacer-050, 10px) !important;
878
+ .adyen-kyc-u-flex-direction-column {
879
+ flex-direction: column !important;
807
880
  }
808
881
 
809
- .adyen-kyc-u-margin-bottom-10 {
810
- margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;
882
+ .adyen-kyc-u-flex-direction-column-reverse {
883
+ flex-direction: column-reverse !important;
811
884
  }
812
885
 
813
- .adyen-kyc-u-margin-left-10 {
814
- margin-left: var(--adyen-internal-spacer-050, 10px) !important;
886
+ .adyen-kyc-u-flex-wrap-wrap {
887
+ flex-wrap: wrap !important;
815
888
  }
816
889
 
817
- .adyen-kyc-u-margin-right-10 {
818
- margin-right: var(--adyen-internal-spacer-050, 10px) !important;
890
+ .adyen-kyc-u-flex-wrap-nowrap {
891
+ flex-wrap: nowrap !important;
819
892
  }
820
893
 
821
- .adyen-kyc-u-margin-top-10 {
822
- margin-top: var(--adyen-internal-spacer-050, 10px) !important;
894
+ .adyen-kyc-u-align-items-start {
895
+ align-items: start !important;
823
896
  }
824
897
 
825
- .adyen-kyc-u-margin-x-10 {
826
- margin-left: var(--adyen-internal-spacer-050, 10px) !important;
827
- margin-right: var(--adyen-internal-spacer-050, 10px) !important;
898
+ .adyen-kyc-u-align-items-flex-start {
899
+ align-items: flex-start !important;
828
900
  }
829
901
 
830
- .adyen-kyc-u-margin-y-10 {
831
- margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;
832
- margin-top: var(--adyen-internal-spacer-050, 10px) !important;
902
+ .adyen-kyc-u-align-items-flex-end {
903
+ align-items: flex-end !important;
833
904
  }
834
905
 
835
- .adyen-kyc-u-margin-12 {
836
- margin: var(--adyen-internal-spacer-060, 12px) !important;
906
+ .adyen-kyc-u-align-items-center {
907
+ align-items: center !important;
837
908
  }
838
909
 
839
- .adyen-kyc-u-margin-bottom-12 {
840
- margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;
910
+ .adyen-kyc-u-align-items-stretch {
911
+ align-items: stretch !important;
841
912
  }
842
913
 
843
- .adyen-kyc-u-margin-left-12 {
844
- margin-left: var(--adyen-internal-spacer-060, 12px) !important;
914
+ .adyen-kyc-u-align-items-baseline {
915
+ align-items: baseline !important;
845
916
  }
846
917
 
847
- .adyen-kyc-u-margin-right-12 {
848
- margin-right: var(--adyen-internal-spacer-060, 12px) !important;
918
+ .adyen-kyc-u-align-items-end {
919
+ align-items: end !important;
849
920
  }
850
921
 
851
- .adyen-kyc-u-margin-top-12 {
852
- margin-top: var(--adyen-internal-spacer-060, 12px) !important;
922
+ .adyen-kyc-u-justify-content-center {
923
+ justify-content: center !important;
853
924
  }
854
925
 
855
- .adyen-kyc-u-margin-x-12 {
856
- margin-left: var(--adyen-internal-spacer-060, 12px) !important;
857
- margin-right: var(--adyen-internal-spacer-060, 12px) !important;
926
+ .adyen-kyc-u-justify-content-flex-start {
927
+ justify-content: flex-start !important;
858
928
  }
859
929
 
860
- .adyen-kyc-u-margin-y-12 {
861
- margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;
862
- margin-top: var(--adyen-internal-spacer-060, 12px) !important;
930
+ .adyen-kyc-u-justify-content-flex-end {
931
+ justify-content: flex-end !important;
863
932
  }
864
933
 
865
- .adyen-kyc-u-margin-16 {
866
- margin: var(--adyen-internal-spacer-070, 16px) !important;
934
+ .adyen-kyc-u-justify-content-start {
935
+ justify-content: start !important;
867
936
  }
868
937
 
869
- .adyen-kyc-u-margin-bottom-16 {
870
- margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;
938
+ .adyen-kyc-u-justify-content-end {
939
+ justify-content: end !important;
871
940
  }
872
941
 
873
- .adyen-kyc-u-margin-left-16 {
874
- margin-left: var(--adyen-internal-spacer-070, 16px) !important;
942
+ .adyen-kyc-u-justify-content-left {
943
+ justify-content: left !important;
875
944
  }
876
945
 
877
- .adyen-kyc-u-margin-right-16 {
878
- margin-right: var(--adyen-internal-spacer-070, 16px) !important;
946
+ .adyen-kyc-u-justify-content-right {
947
+ justify-content: right !important;
879
948
  }
880
949
 
881
- .adyen-kyc-u-margin-top-16 {
882
- margin-top: var(--adyen-internal-spacer-070, 16px) !important;
950
+ .adyen-kyc-u-justify-content-space-between {
951
+ justify-content: space-between !important;
883
952
  }
884
953
 
885
- .adyen-kyc-u-margin-x-16 {
886
- margin-left: var(--adyen-internal-spacer-070, 16px) !important;
887
- margin-right: var(--adyen-internal-spacer-070, 16px) !important;
954
+ .adyen-kyc-u-justify-content-space-around {
955
+ justify-content: space-around !important;
888
956
  }
889
957
 
890
- .adyen-kyc-u-margin-y-16 {
891
- margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;
892
- margin-top: var(--adyen-internal-spacer-070, 16px) !important;
958
+ .adyen-kyc-u-justify-content-space-evenly {
959
+ justify-content: space-evenly !important;
893
960
  }
894
961
 
895
- .adyen-kyc-u-margin-20 {
896
- margin: var(--adyen-internal-spacer-080, 20px) !important;
962
+ .adyen-kyc-u-justify-content-stretch {
963
+ justify-content: stretch !important;
897
964
  }
898
965
 
899
- .adyen-kyc-u-margin-bottom-20 {
900
- margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;
966
+ .adyen-kyc-u-flex-1 {
967
+ flex: 1 !important;
901
968
  }
902
969
 
903
- .adyen-kyc-u-margin-left-20 {
904
- margin-left: var(--adyen-internal-spacer-080, 20px) !important;
970
+ .adyen-kyc-u-flex-2 {
971
+ flex: 2 !important;
905
972
  }
906
973
 
907
- .adyen-kyc-u-margin-right-20 {
908
- margin-right: var(--adyen-internal-spacer-080, 20px) !important;
974
+ .adyen-kyc-u-flex-3 {
975
+ flex: 3 !important;
909
976
  }
910
977
 
911
- .adyen-kyc-u-margin-top-20 {
912
- margin-top: var(--adyen-internal-spacer-080, 20px) !important;
978
+ .adyen-kyc-u-flex-4 {
979
+ flex: 4 !important;
913
980
  }
914
981
 
915
- .adyen-kyc-u-margin-x-20 {
916
- margin-left: var(--adyen-internal-spacer-080, 20px) !important;
917
- margin-right: var(--adyen-internal-spacer-080, 20px) !important;
982
+ .adyen-kyc-u-margin-auto {
983
+ margin: auto !important;
918
984
  }
919
985
 
920
- .adyen-kyc-u-margin-y-20 {
921
- margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;
922
- margin-top: var(--adyen-internal-spacer-080, 20px) !important;
986
+ .adyen-kyc-u-margin-bottom-auto {
987
+ margin-bottom: auto !important;
923
988
  }
924
989
 
925
- .adyen-kyc-u-margin-24 {
926
- margin: var(--adyen-internal-spacer-090, 24px) !important;
990
+ .adyen-kyc-u-margin-left-auto {
991
+ margin-left: auto !important;
927
992
  }
928
993
 
929
- .adyen-kyc-u-margin-bottom-24 {
930
- margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;
994
+ .adyen-kyc-u-margin-right-auto {
995
+ margin-right: auto !important;
931
996
  }
932
997
 
933
- .adyen-kyc-u-margin-left-24 {
934
- margin-left: var(--adyen-internal-spacer-090, 24px) !important;
998
+ .adyen-kyc-u-margin-top-auto {
999
+ margin-top: auto !important;
935
1000
  }
936
1001
 
937
- .adyen-kyc-u-margin-right-24 {
938
- margin-right: var(--adyen-internal-spacer-090, 24px) !important;
1002
+ .adyen-kyc-u-margin-x-auto {
1003
+ margin-left: auto !important;
1004
+ margin-right: auto !important;
939
1005
  }
940
1006
 
941
- .adyen-kyc-u-margin-top-24 {
942
- margin-top: var(--adyen-internal-spacer-090, 24px) !important;
1007
+ .adyen-kyc-u-margin-y-auto {
1008
+ margin-bottom: auto !important;
1009
+ margin-top: auto !important;
943
1010
  }
944
1011
 
945
- .adyen-kyc-u-margin-x-24 {
946
- margin-left: var(--adyen-internal-spacer-090, 24px) !important;
947
- margin-right: var(--adyen-internal-spacer-090, 24px) !important;
1012
+ .adyen-kyc-u-margin-0 {
1013
+ margin: var(--adyen-internal-spacer-000, 0px) !important;
948
1014
  }
949
1015
 
950
- .adyen-kyc-u-margin-y-24 {
951
- margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;
952
- margin-top: var(--adyen-internal-spacer-090, 24px) !important;
1016
+ .adyen-kyc-u-margin-bottom-0 {
1017
+ margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;
953
1018
  }
954
1019
 
955
- .adyen-kyc-u-margin-32 {
956
- margin: var(--adyen-internal-spacer-100, 32px) !important;
1020
+ .adyen-kyc-u-margin-left-0 {
1021
+ margin-left: var(--adyen-internal-spacer-000, 0px) !important;
957
1022
  }
958
1023
 
959
- .adyen-kyc-u-margin-bottom-32 {
960
- margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;
1024
+ .adyen-kyc-u-margin-right-0 {
1025
+ margin-right: var(--adyen-internal-spacer-000, 0px) !important;
961
1026
  }
962
1027
 
963
- .adyen-kyc-u-margin-left-32 {
964
- margin-left: var(--adyen-internal-spacer-100, 32px) !important;
1028
+ .adyen-kyc-u-margin-top-0 {
1029
+ margin-top: var(--adyen-internal-spacer-000, 0px) !important;
965
1030
  }
966
1031
 
967
- .adyen-kyc-u-margin-right-32 {
968
- margin-right: var(--adyen-internal-spacer-100, 32px) !important;
1032
+ .adyen-kyc-u-margin-x-0 {
1033
+ margin-left: var(--adyen-internal-spacer-000, 0px) !important;
1034
+ margin-right: var(--adyen-internal-spacer-000, 0px) !important;
969
1035
  }
970
1036
 
971
- .adyen-kyc-u-margin-top-32 {
972
- margin-top: var(--adyen-internal-spacer-100, 32px) !important;
1037
+ .adyen-kyc-u-margin-y-0 {
1038
+ margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;
1039
+ margin-top: var(--adyen-internal-spacer-000, 0px) !important;
973
1040
  }
974
1041
 
975
- .adyen-kyc-u-margin-x-32 {
976
- margin-left: var(--adyen-internal-spacer-100, 32px) !important;
977
- margin-right: var(--adyen-internal-spacer-100, 32px) !important;
1042
+ .adyen-kyc-u-margin-2 {
1043
+ margin: var(--adyen-internal-spacer-010, 2px) !important;
978
1044
  }
979
1045
 
980
- .adyen-kyc-u-margin-y-32 {
981
- margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;
982
- margin-top: var(--adyen-internal-spacer-100, 32px) !important;
1046
+ .adyen-kyc-u-margin-bottom-2 {
1047
+ margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;
983
1048
  }
984
1049
 
985
- .adyen-kyc-u-margin-40 {
986
- margin: var(--adyen-internal-spacer-110, 40px) !important;
1050
+ .adyen-kyc-u-margin-left-2 {
1051
+ margin-left: var(--adyen-internal-spacer-010, 2px) !important;
987
1052
  }
988
1053
 
989
- .adyen-kyc-u-margin-bottom-40 {
990
- margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;
1054
+ .adyen-kyc-u-margin-right-2 {
1055
+ margin-right: var(--adyen-internal-spacer-010, 2px) !important;
991
1056
  }
992
1057
 
993
- .adyen-kyc-u-margin-left-40 {
994
- margin-left: var(--adyen-internal-spacer-110, 40px) !important;
1058
+ .adyen-kyc-u-margin-top-2 {
1059
+ margin-top: var(--adyen-internal-spacer-010, 2px) !important;
995
1060
  }
996
1061
 
997
- .adyen-kyc-u-margin-right-40 {
998
- margin-right: var(--adyen-internal-spacer-110, 40px) !important;
1062
+ .adyen-kyc-u-margin-x-2 {
1063
+ margin-left: var(--adyen-internal-spacer-010, 2px) !important;
1064
+ margin-right: var(--adyen-internal-spacer-010, 2px) !important;
999
1065
  }
1000
1066
 
1001
- .adyen-kyc-u-margin-top-40 {
1002
- margin-top: var(--adyen-internal-spacer-110, 40px) !important;
1067
+ .adyen-kyc-u-margin-y-2 {
1068
+ margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;
1069
+ margin-top: var(--adyen-internal-spacer-010, 2px) !important;
1003
1070
  }
1004
1071
 
1005
- .adyen-kyc-u-margin-x-40 {
1006
- margin-left: var(--adyen-internal-spacer-110, 40px) !important;
1007
- margin-right: var(--adyen-internal-spacer-110, 40px) !important;
1072
+ .adyen-kyc-u-margin-4 {
1073
+ margin: var(--adyen-internal-spacer-020, 4px) !important;
1008
1074
  }
1009
1075
 
1010
- .adyen-kyc-u-margin-y-40 {
1011
- margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;
1012
- margin-top: var(--adyen-internal-spacer-110, 40px) !important;
1076
+ .adyen-kyc-u-margin-bottom-4 {
1077
+ margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;
1013
1078
  }
1014
1079
 
1015
- .adyen-kyc-u-margin-48 {
1016
- margin: var(--adyen-internal-spacer-120, 48px) !important;
1080
+ .adyen-kyc-u-margin-left-4 {
1081
+ margin-left: var(--adyen-internal-spacer-020, 4px) !important;
1017
1082
  }
1018
1083
 
1019
- .adyen-kyc-u-margin-bottom-48 {
1020
- margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
1084
+ .adyen-kyc-u-margin-right-4 {
1085
+ margin-right: var(--adyen-internal-spacer-020, 4px) !important;
1021
1086
  }
1022
1087
 
1023
- .adyen-kyc-u-margin-left-48 {
1024
- margin-left: var(--adyen-internal-spacer-120, 48px) !important;
1088
+ .adyen-kyc-u-margin-top-4 {
1089
+ margin-top: var(--adyen-internal-spacer-020, 4px) !important;
1025
1090
  }
1026
1091
 
1027
- .adyen-kyc-u-margin-right-48 {
1028
- margin-right: var(--adyen-internal-spacer-120, 48px) !important;
1092
+ .adyen-kyc-u-margin-x-4 {
1093
+ margin-left: var(--adyen-internal-spacer-020, 4px) !important;
1094
+ margin-right: var(--adyen-internal-spacer-020, 4px) !important;
1029
1095
  }
1030
1096
 
1031
- .adyen-kyc-u-margin-top-48 {
1032
- margin-top: var(--adyen-internal-spacer-120, 48px) !important;
1097
+ .adyen-kyc-u-margin-y-4 {
1098
+ margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;
1099
+ margin-top: var(--adyen-internal-spacer-020, 4px) !important;
1033
1100
  }
1034
1101
 
1035
- .adyen-kyc-u-margin-x-48 {
1036
- margin-left: var(--adyen-internal-spacer-120, 48px) !important;
1037
- margin-right: var(--adyen-internal-spacer-120, 48px) !important;
1102
+ .adyen-kyc-u-margin-6 {
1103
+ margin: var(--adyen-internal-spacer-030, 6px) !important;
1038
1104
  }
1039
1105
 
1040
- .adyen-kyc-u-margin-y-48 {
1041
- margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
1042
- margin-top: var(--adyen-internal-spacer-120, 48px) !important;
1106
+ .adyen-kyc-u-margin-bottom-6 {
1107
+ margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;
1043
1108
  }
1044
1109
 
1045
- /* for container queries */
1046
- .adyen-kyc-u-width-full {
1047
- width: 100% !important;
1110
+ .adyen-kyc-u-margin-left-6 {
1111
+ margin-left: var(--adyen-internal-spacer-030, 6px) !important;
1048
1112
  }
1049
1113
 
1050
- .adyen-kyc-u-width-half {
1051
- width: 50% !important;
1114
+ .adyen-kyc-u-margin-right-6 {
1115
+ margin-right: var(--adyen-internal-spacer-030, 6px) !important;
1052
1116
  }
1053
1117
 
1054
- /* Topmost/root container class */
1055
- .adyen-kyc-ui-element-container-wrapper {
1056
- width: 100%;
1057
- overflow: auto;
1058
- /**
1059
- * main container query, used similarly to a @media query
1060
- * considering our Component can be embedded in a container of arbitrary size
1061
- * that does not necessarily match the whole window/screen size.
1062
- * Uses s and l breakpoints defined in variables.
1063
- */
1064
- container-type: inline-size;
1065
- container-name: main;
1118
+ .adyen-kyc-u-margin-top-6 {
1119
+ margin-top: var(--adyen-internal-spacer-030, 6px) !important;
1066
1120
  }
1067
1121
 
1068
- .adyen-kyc-ui-element-container-wrapper *,
1069
- .adyen-kyc-ui-element-container-wrapper *::after,
1070
- .adyen-kyc-ui-element-container-wrapper *::before {
1071
- box-sizing: border-box;
1122
+ .adyen-kyc-u-margin-x-6 {
1123
+ margin-left: var(--adyen-internal-spacer-030, 6px) !important;
1124
+ margin-right: var(--adyen-internal-spacer-030, 6px) !important;
1072
1125
  }
1073
1126
 
1074
- .adyen-kyc-ui-element-container {
1075
- background-color: var(--adyen-internal-color-background-primary, #ffffff);
1076
- position: relative;
1077
- padding: var(--adyen-internal-spacer-100, 32px);
1078
- border-radius: var(--adyen-internal-border-radius-m, 8px);
1079
- font-family: var(--adyen-internal-text-body-font-family);
1080
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1081
- font-weight: var(--adyen-internal-text-body-font-weight, 400);
1082
- line-height: var(--adyen-internal-text-body-line-height, 20px);
1083
- color: var(--adyen-internal-color-label-primary, #001222);
1127
+ .adyen-kyc-u-margin-y-6 {
1128
+ margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;
1129
+ margin-top: var(--adyen-internal-spacer-030, 6px) !important;
1084
1130
  }
1085
- .adyen-kyc-ui-element-container p,
1086
- .adyen-kyc-ui-element-container ol,
1087
- .adyen-kyc-ui-element-container ul {
1088
- margin-bottom: 0;
1089
- margin-top: 0;
1131
+
1132
+ .adyen-kyc-u-margin-8 {
1133
+ margin: var(--adyen-internal-spacer-040, 8px) !important;
1090
1134
  }
1091
- .adyen-kyc-ui-element-container ul,
1092
- .adyen-kyc-ui-element-container ol {
1093
- padding-left: 1.5em;
1135
+
1136
+ .adyen-kyc-u-margin-bottom-8 {
1137
+ margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;
1094
1138
  }
1095
- @container main (max-width: 680px) {
1096
- .adyen-kyc-ui-element-container {
1097
- padding: var(--adyen-internal-spacer-070, 16px);
1098
- }
1139
+
1140
+ .adyen-kyc-u-margin-left-8 {
1141
+ margin-left: var(--adyen-internal-spacer-040, 8px) !important;
1099
1142
  }
1100
1143
 
1101
- /*
1102
- * Compatibility later to ensure components do NOT receive extra padding
1103
- * as is the case with dropins, without breaking dropins.
1104
- * Once the Component Layout has been done `.adyen-kyc-externalComponent`
1105
- * can be safely removed everywere.
1106
- */
1107
- .adyen-kyc-ui-element-container:has(.adyen-kyc-externalComponent) {
1108
- padding: 0;
1144
+ .adyen-kyc-u-margin-right-8 {
1145
+ margin-right: var(--adyen-internal-spacer-040, 8px) !important;
1109
1146
  }
1110
1147
 
1111
- /**
1112
- * :root is needed for non-web components, while :host for web components (TODO: change on v4)
1113
- *
1114
- * This produces css like:
1115
- * --adyen-internal-text-color: var(--adyen-sdk-text-color, #000);
1116
- *
1117
- * The `internal` part matches how we use css variables in the code
1118
- * The `sdk` part is how consumers customize it from outside our code
1119
- * The $value is the fallback bare value, used when the variable was not customized
1120
- *
1121
- * The reason we have `internal` and `sdk` is because doing something like:
1122
- * --color: var(--color, #0f0) would create a loop, and the browser ignores it.
1123
- *
1124
- */
1125
- :root,
1126
- :host {
1127
- --adyen-internal-animation-easing-standard: var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
1128
- --adyen-internal-animation-easing-enter: var(--adyen-sdk-animation-easing-enter, cubic-bezier(0.12, 0.6, 0.4, 0.95));
1129
- --adyen-internal-animation-easing-exit: var(--adyen-sdk-animation-easing-exit, cubic-bezier(0.4, 0, 1, 1));
1130
- --adyen-internal-animation-easing-linear: var(--adyen-sdk-animation-easing-linear, linear);
1131
- --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
1132
- --adyen-internal-animation-duration-moderate: var(--adyen-sdk-animation-duration-moderate, 150ms);
1133
- --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
1134
- --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #ffffff);
1135
- --adyen-internal-color-background-primary-hover: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);
1136
- --adyen-internal-color-background-primary-active: var(--adyen-sdk-color-background-primary-active, #ecedef);
1137
- --adyen-internal-color-background-secondary: var(--adyen-sdk-color-background-secondary, #f4f5f6);
1138
- --adyen-internal-color-background-secondary-hover: var(--adyen-sdk-color-background-secondary-hover, #ecedef);
1139
- --adyen-internal-color-background-secondary-active: var(--adyen-sdk-color-background-secondary-active, #e2e5e7);
1140
- --adyen-internal-color-background-tertiary: var(--adyen-sdk-color-background-tertiary, #ecedef);
1141
- --adyen-internal-color-background-tertiary-hover: var(--adyen-sdk-color-background-tertiary-hover, #e2e5e7);
1142
- --adyen-internal-color-background-tertiary-active: var(--adyen-sdk-color-background-tertiary-active, #dadddf);
1143
- --adyen-internal-color-background-quaternary: var(--adyen-sdk-color-background-quaternary, #c0c5ca);
1144
- --adyen-internal-color-background-quaternary-hover: var(--adyen-sdk-color-background-quaternary-hover, #b7bdc2);
1145
- --adyen-internal-color-background-quaternary-active: var(--adyen-sdk-color-background-quaternary-active, #aeb5ba);
1146
- --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #ffffff);
1147
- --adyen-internal-color-background-modal-hover: var(--adyen-sdk-color-background-modal-hover, #f4f5f6);
1148
- --adyen-internal-color-background-modal-active: var(--adyen-sdk-color-background-modal-active, #ecedef);
1149
- --adyen-internal-color-background-disabled: var(--adyen-sdk-color-background-disabled, #ecedef);
1150
- --adyen-internal-color-background-selected: var(--adyen-sdk-color-background-selected, #e3effb);
1151
- --adyen-internal-color-background-selected-hover: var(--adyen-sdk-color-background-selected-hover, #d4e6f9);
1152
- --adyen-internal-color-background-selected-active: var(--adyen-sdk-color-background-selected-active, #c8dff7);
1153
- --adyen-internal-color-background-spotlight: var(--adyen-sdk-color-background-spotlight, #ffe379);
1154
- --adyen-internal-color-background-critical-weak: var(--adyen-sdk-color-background-critical-weak, #fff3ef);
1155
- --adyen-internal-color-background-critical-strong: var(--adyen-sdk-color-background-critical-strong, #dc3801);
1156
- --adyen-internal-color-background-critical-strong-hover: var(--adyen-sdk-color-background-critical-strong-hover, #c13101);
1157
- --adyen-internal-color-background-critical-strong-active: var(--adyen-sdk-color-background-critical-strong-active, #751e00);
1158
- --adyen-internal-color-background-warning-weak: var(--adyen-sdk-color-background-warning-weak, #fff4e5);
1159
- --adyen-internal-color-background-warning-weak-hover: var(--adyen-sdk-color-background-warning-weak-hover, #ffecd0);
1160
- --adyen-internal-color-background-warning-weak-active: var(--adyen-sdk-color-background-warning-weak-active, #ffe0b3);
1161
- --adyen-internal-color-background-warning-strong: var(--adyen-sdk-color-background-warning-strong, #d77f00);
1162
- --adyen-internal-color-background-success-weak: var(--adyen-sdk-color-background-success-weak, #e4faef);
1163
- --adyen-internal-color-background-success-strong: var(--adyen-sdk-color-background-success-strong, #008845);
1164
- --adyen-internal-color-background-highlight-weak: var(--adyen-sdk-color-background-highlight-weak, #f0f6fd);
1165
- --adyen-internal-color-background-highlight-strong: var(--adyen-sdk-color-background-highlight-strong, #0f75dc);
1166
- --adyen-internal-color-background-inverse-primary: var(--adyen-sdk-color-background-inverse-primary, #001222);
1167
- --adyen-internal-color-background-inverse-primary-hover: var(--adyen-sdk-color-background-inverse-primary-hover, #5c6874);
1168
- --adyen-internal-color-background-inverse-primary-active: var(--adyen-sdk-color-background-inverse-primary-active, #6c7782);
1169
- --adyen-internal-color-background-inverse-secondary: var(--adyen-sdk-color-background-inverse-secondary, #1a2b3b);
1170
- --adyen-internal-color-background-inverse-secondary-hover: var(--adyen-sdk-color-background-inverse-secondary-hover, #273746);
1171
- --adyen-internal-color-background-inverse-secondary-active: var(--adyen-sdk-color-background-inverse-secondary-active, #364553);
1172
- --adyen-internal-color-background-inverse-disabled: var(--adyen-sdk-color-background-inverse-disabled, #273746);
1173
- --adyen-internal-color-background-inverse-critical-weak: var(--adyen-sdk-color-background-inverse-critical-weak, #5c1800);
1174
- --adyen-internal-color-background-inverse-critical-strong: var(--adyen-sdk-color-background-inverse-critical-strong, #ff9a78);
1175
- --adyen-internal-color-background-inverse-critical-strong-hover: var(--adyen-sdk-color-background-inverse-critical-strong-hover, #ffbda6);
1176
- --adyen-internal-color-background-inverse-critical-strong-active: var(--adyen-sdk-color-background-inverse-critical-strong-active, #ffded3);
1177
- --adyen-internal-color-background-always-light: var(--adyen-sdk-color-background-always-light, #ffffff);
1178
- --adyen-internal-color-background-always-light-hover: var(--adyen-sdk-color-background-always-light-hover, #f4f5f6);
1179
- --adyen-internal-color-background-always-light-active: var(--adyen-sdk-color-background-always-light-active, #ecedef);
1180
- --adyen-internal-color-background-always-light-disabled: var(--adyen-sdk-color-background-always-light-disabled, #ecedef);
1181
- --adyen-internal-color-background-always-light-selected: var(--adyen-sdk-color-background-always-light-selected, #e3effb);
1182
- --adyen-internal-color-background-always-dark: var(--adyen-sdk-color-background-always-dark, #001222);
1183
- --adyen-internal-color-background-always-dark-hover: var(--adyen-sdk-color-background-always-dark-hover, #5c6874);
1184
- --adyen-internal-color-background-always-dark-active: var(--adyen-sdk-color-background-always-dark-active, #8c959d);
1185
- --adyen-internal-color-background-always-dark-disabled: var(--adyen-sdk-color-background-always-dark-disabled, #ecedef);
1186
- --adyen-internal-color-background-always-dark-selected: var(--adyen-sdk-color-background-always-dark-selected, #00305f);
1187
- --adyen-internal-color-background-always-dark-primary: var(--adyen-sdk-color-background-always-dark-primary, #001222);
1188
- --adyen-internal-color-background-always-dark-primary-hover: var(--adyen-sdk-color-background-always-dark-primary-hover, #132434);
1189
- --adyen-internal-color-background-always-dark-primary-active: var(--adyen-sdk-color-background-always-dark-primary-active, #213140);
1190
- --adyen-internal-color-background-always-dark-primary-disabled: var(--adyen-sdk-color-background-always-dark-primary-disabled, #ecedef);
1191
- --adyen-internal-color-background-always-dark-primary-selected: var(--adyen-sdk-color-background-always-dark-primary-selected, #00305f);
1192
- --adyen-internal-color-background-always-dark-secondary: var(--adyen-sdk-color-background-always-dark-secondary, #213140);
1193
- --adyen-internal-color-background-always-dark-secondary-hover: var(--adyen-sdk-color-background-always-dark-secondary-hover, #364553);
1194
- --adyen-internal-color-background-always-dark-secondary-active: var(--adyen-sdk-color-background-always-dark-secondary-active, #455460);
1195
- --adyen-internal-color-background-always-dark-secondary-disabled: var(--adyen-sdk-color-background-always-dark-secondary-disabled, #ecedef);
1196
- --adyen-internal-color-background-always-dark-secondary-selected: var(--adyen-sdk-color-background-always-dark-secondary-selected, #00305f);
1197
- --adyen-internal-color-background-always-dark-tertiary: var(--adyen-sdk-color-background-always-dark-tertiary, #2f3e4d);
1198
- --adyen-internal-color-background-always-dark-tertiary-hover: var(--adyen-sdk-color-background-always-dark-tertiary-hover, #3d4c5a);
1199
- --adyen-internal-color-background-always-dark-tertiary-active: var(--adyen-sdk-color-background-always-dark-tertiary-active, #455460);
1200
- --adyen-internal-color-background-always-dark-tertiary-disabled: var(--adyen-sdk-color-background-always-dark-tertiary-disabled, #ecedef);
1201
- --adyen-internal-color-background-always-dark-tertiary-selected: var(--adyen-sdk-color-background-always-dark-tertiary-selected, #00305f);
1202
- --adyen-internal-color-label-primary: var(--adyen-sdk-color-label-primary, #001222);
1203
- --adyen-internal-color-label-primary-hover: var(--adyen-sdk-color-label-primary-hover, #5c6874);
1204
- --adyen-internal-color-label-primary-active: var(--adyen-sdk-color-label-primary-active, #6c7782);
1205
- --adyen-internal-color-label-secondary: var(--adyen-sdk-color-label-secondary, #5c6874);
1206
- --adyen-internal-color-label-tertiary: var(--adyen-sdk-color-label-tertiary, #8c959d);
1207
- --adyen-internal-color-label-disabled: var(--adyen-sdk-color-label-disabled, #8c959d);
1208
- --adyen-internal-color-label-critical: var(--adyen-sdk-color-label-critical, #dc3801);
1209
- --adyen-internal-color-label-critical-hover: var(--adyen-sdk-color-label-critical-hover, #c13101);
1210
- --adyen-internal-color-label-critical-active: var(--adyen-sdk-color-label-critical-active, #751e00);
1211
- --adyen-internal-color-label-warning: var(--adyen-sdk-color-label-warning, #ab6600);
1212
- --adyen-internal-color-label-highlight: var(--adyen-sdk-color-label-highlight, #0f75dc);
1213
- --adyen-internal-color-label-success: var(--adyen-sdk-color-label-success, #008845);
1214
- --adyen-internal-color-label-on-color: var(--adyen-sdk-color-label-on-color, #ffffff);
1215
- --adyen-internal-color-label-inverse-primary: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
1216
- --adyen-internal-color-label-inverse-primary-hover: var(--adyen-sdk-color-label-inverse-primary-hover, #f4f5f6);
1217
- --adyen-internal-color-label-inverse-primary-active: var(--adyen-sdk-color-label-inverse-primary-active, #ecedef);
1218
- --adyen-internal-color-label-inverse-secondary: var(--adyen-sdk-color-label-inverse-secondary, #9da5ac);
1219
- --adyen-internal-color-label-inverse-disabled: var(--adyen-sdk-color-label-inverse-disabled, #737e88);
1220
- --adyen-internal-color-label-inverse-critical: var(--adyen-sdk-color-label-inverse-critical, #ff9a78);
1221
- --adyen-internal-color-label-inverse-critical-hover: var(--adyen-sdk-color-label-inverse-critical-hover, #ffbda6);
1222
- --adyen-internal-color-label-inverse-critical-active: var(--adyen-sdk-color-label-inverse-critical-active, #ffded3);
1223
- --adyen-internal-color-label-on-background-critical-weak: var(--adyen-sdk-color-label-on-background-critical-weak, #c13101);
1224
- --adyen-internal-color-label-on-background-warning-weak: var(--adyen-sdk-color-label-on-background-warning-weak, #955900);
1225
- --adyen-internal-color-label-on-background-success-weak: var(--adyen-sdk-color-label-on-background-success-weak, #00773c);
1226
- --adyen-internal-color-label-on-background-highlight-weak: var(--adyen-sdk-color-label-on-background-highlight-weak, #0065c9);
1227
- --adyen-internal-color-label-always-light: var(--adyen-sdk-color-label-always-light, #ffffff);
1228
- --adyen-internal-color-label-always-light-primary: var(--adyen-sdk-color-label-always-light-primary, #ecedef);
1229
- --adyen-internal-color-label-always-light-primary-hover: var(--adyen-sdk-color-label-always-light-primary-hover, #c8ccd0);
1230
- --adyen-internal-color-label-always-light-primary-active: var(--adyen-sdk-color-label-always-light-primary-active, #959da5);
1231
- --adyen-internal-color-label-always-light-secondary: var(--adyen-sdk-color-label-always-light-secondary, #a6adb3);
1232
- --adyen-internal-color-label-always-light-secondary-hover: var(--adyen-sdk-color-label-always-light-secondary-hover, #959da5);
1233
- --adyen-internal-color-label-always-light-secondary-active: var(--adyen-sdk-color-label-always-light-secondary-active, #737e88);
1234
- --adyen-internal-color-label-always-light-tertiary: var(--adyen-sdk-color-label-always-light-tertiary, #848d96);
1235
- --adyen-internal-color-label-always-light-tertiary-hover: var(--adyen-sdk-color-label-always-light-tertiary-hover, #737e88);
1236
- --adyen-internal-color-label-always-light-tertiary-active: var(--adyen-sdk-color-label-always-light-tertiary-active, #54616d);
1237
- --adyen-internal-color-label-always-dark: var(--adyen-sdk-color-label-always-dark, #001222);
1238
- --adyen-internal-color-link-primary: var(--adyen-sdk-color-link-primary, #0065c9);
1239
- --adyen-internal-color-link-primary-hover: var(--adyen-sdk-color-link-primary-hover, #0f75dc);
1240
- --adyen-internal-color-link-primary-active: var(--adyen-sdk-color-link-primary-active, #0f75dc);
1241
- --adyen-internal-color-link-primary-disabled: var(--adyen-sdk-color-link-primary-disabled, #8c959d);
1242
- --adyen-internal-color-link-primary-visited: var(--adyen-sdk-color-link-primary-visited, #540884);
1243
- --adyen-internal-color-link-primary-visited-hover: var(--adyen-sdk-color-link-primary-visited-hover, #710ab3);
1244
- --adyen-internal-color-link-primary-visited-active: var(--adyen-sdk-color-link-primary-visited-active, #710ab3);
1245
- --adyen-internal-color-link-quiet: var(--adyen-sdk-color-link-quiet, #001222);
1246
- --adyen-internal-color-link-quiet-hover: var(--adyen-sdk-color-link-quiet-hover, #5c6874);
1247
- --adyen-internal-color-link-quiet-active: var(--adyen-sdk-color-link-quiet-active, #5c6874);
1248
- --adyen-internal-color-link-quiet-disabled: var(--adyen-sdk-color-link-quiet-disabled, #8c959d);
1249
- --adyen-internal-color-outline-primary: var(--adyen-sdk-color-outline-primary, #dadddf);
1250
- --adyen-internal-color-outline-primary-hover: var(--adyen-sdk-color-outline-primary-hover, #c8ccd0);
1251
- --adyen-internal-color-outline-primary-active: var(--adyen-sdk-color-outline-primary-active, #001222);
1252
- --adyen-internal-color-outline-secondary: var(--adyen-sdk-color-outline-secondary, #c8ccd0);
1253
- --adyen-internal-color-outline-secondary-hover: var(--adyen-sdk-color-outline-secondary-hover, #b7bdc2);
1254
- --adyen-internal-color-outline-secondary-active: var(--adyen-sdk-color-outline-secondary-active, #001222);
1255
- --adyen-internal-color-outline-tertiary: var(--adyen-sdk-color-outline-tertiary, #8c959d);
1256
- --adyen-internal-color-outline-tertiary-hover: var(--adyen-sdk-color-outline-tertiary-hover, #6c7782);
1257
- --adyen-internal-color-outline-tertiary-active: var(--adyen-sdk-color-outline-tertiary-active, #001222);
1258
- --adyen-internal-color-outline-disabled: var(--adyen-sdk-color-outline-disabled, #dadddf);
1259
- --adyen-internal-color-outline-selected: var(--adyen-sdk-color-outline-selected, #001222);
1260
- --adyen-internal-color-outline-critical: var(--adyen-sdk-color-outline-critical, #dc3801);
1261
- --adyen-internal-color-outline-critical-hover: var(--adyen-sdk-color-outline-critical-hover, #c13101);
1262
- --adyen-internal-color-outline-critical-active: var(--adyen-sdk-color-outline-critical-active, #751e00);
1263
- --adyen-internal-color-outline-success: var(--adyen-sdk-color-outline-success, #008845);
1264
- --adyen-internal-color-outline-success-hover: var(--adyen-sdk-color-outline-success-hover, #00773c);
1265
- --adyen-internal-color-outline-success-active: var(--adyen-sdk-color-outline-success-active, #004724);
1266
- --adyen-internal-color-outline-inverse-primary: var(--adyen-sdk-color-outline-inverse-primary, #2f3e4d);
1267
- --adyen-internal-color-outline-inverse-primary-hover: var(--adyen-sdk-color-outline-inverse-primary-hover, #6c7782);
1268
- --adyen-internal-color-outline-inverse-primary-active: var(--adyen-sdk-color-outline-inverse-primary-active, #9da5ac);
1269
- --adyen-internal-color-outline-inverse-disabled: var(--adyen-sdk-color-outline-inverse-disabled, #455460);
1270
- --adyen-internal-color-outline-inverse-critical: var(--adyen-sdk-color-outline-inverse-critical, #ff9a78);
1271
- --adyen-internal-color-outline-inverse-critical-hover: var(--adyen-sdk-color-outline-inverse-critical-hover, #ffbda6);
1272
- --adyen-internal-color-outline-inverse-critical-active: var(--adyen-sdk-color-outline-inverse-critical-active, #ffded3);
1273
- --adyen-internal-color-separator-primary: var(--adyen-sdk-color-separator-primary, #dadddf);
1274
- --adyen-internal-color-separator-secondary: var(--adyen-sdk-color-separator-secondary, #c8ccd0);
1275
- --adyen-internal-color-separator-inverse-primary: var(--adyen-sdk-color-separator-inverse-primary, #2f3e4d);
1276
- --adyen-internal-color-separator-inverse-secondary: var(--adyen-sdk-color-separator-inverse-secondary, #5c6874);
1277
- --adyen-internal-color-decorative-green: var(--adyen-sdk-color-decorative-green, #00d16a);
1278
- --adyen-internal-color-decorative-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
1279
- --adyen-internal-color-decorative-yellow: var(--adyen-sdk-color-decorative-yellow, #f9c500);
1280
- --adyen-internal-color-decorative-orange: var(--adyen-sdk-color-decorative-orange, #f99300);
1281
- --adyen-internal-color-decorative-red: var(--adyen-sdk-color-decorative-red, #f73f01);
1282
- --adyen-internal-color-decorative-grey: var(--adyen-sdk-color-decorative-grey, #848d96);
1283
- --adyen-internal-color-support-overlay: var(--adyen-sdk-color-support-overlay, #001222);
1284
- --adyen-internal-color-support-shadow: var(--adyen-sdk-color-support-shadow, #001222);
1285
- --adyen-internal-text-font-variant-numeric: var(--adyen-sdk-text-font-variant-numeric, normal);
1286
- --adyen-internal-text-rich-text-heading-margin: var(--adyen-sdk-text-rich-text-heading-margin, 32px 0 10px 0);
1287
- --adyen-internal-text-rich-text-heading-font-weight: var(--adyen-sdk-text-rich-text-heading-font-weight, 700);
1288
- --adyen-internal-text-rich-text-paragraph-margin: var(--adyen-sdk-text-rich-text-paragraph-margin, 0 0 8px 0);
1289
- --adyen-internal-text-rich-text-list-padding-left: var(--adyen-sdk-text-rich-text-list-padding-left, 20px);
1290
- --adyen-internal-text-rich-text-list-margin: var(--adyen-sdk-text-rich-text-list-margin, 0 0 4px 0);
1291
- --adyen-internal-text-rich-text-code-background-color: var(--adyen-sdk-text-rich-text-code-background-color, #f4f5f6);
1292
- --adyen-internal-text-rich-text-code-font-family: var(--adyen-sdk-text-rich-text-code-font-family, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1293
- --adyen-internal-text-rich-text-code-font-weight: var(--adyen-sdk-text-rich-text-code-font-weight, 500);
1294
- --adyen-internal-text-rich-text-pre-margin: var(--adyen-sdk-text-rich-text-pre-margin, 16px 0 16px 0);
1295
- --adyen-internal-text-rich-text-pre-padding: var(--adyen-sdk-text-rich-text-pre-padding, 10px 16px);
1296
- --adyen-internal-text-rich-text-pre-line-height: var(--adyen-sdk-text-rich-text-pre-line-height, 24px);
1297
- --adyen-internal-text-rich-text-mark-background-color: var(--adyen-sdk-text-rich-text-mark-background-color, #f0f6fd);
1298
- --adyen-internal-text-rich-text-blockquote-font-weight: var(--adyen-sdk-text-rich-text-blockquote-font-weight, 500);
1299
- --adyen-internal-text-rich-text-blockquote-margin: var(--adyen-sdk-text-rich-text-blockquote-margin, 16px 0 16px 16px);
1300
- --adyen-internal-text-rich-text-table-border: var(--adyen-sdk-text-rich-text-table-border, 1px solid #dadddf);
1301
- --adyen-internal-text-rich-text-table-line-height: var(--adyen-sdk-text-rich-text-table-line-height, 20px);
1302
- --adyen-internal-text-rich-text-table-margin: var(--adyen-sdk-text-rich-text-table-margin, 16px 0 16px 0);
1303
- --adyen-internal-text-rich-text-table-padding: var(--adyen-sdk-text-rich-text-table-padding, 10px 16px);
1304
- --adyen-internal-text-rich-text-table-header-font-weight: var(--adyen-sdk-text-rich-text-table-header-font-weight, 700);
1305
- --adyen-internal-text-rich-text-table-caption-line-height: var(--adyen-sdk-text-rich-text-table-caption-line-height, 20px);
1306
- --adyen-internal-text-rich-text-table-caption-margin: var(--adyen-sdk-text-rich-text-table-caption-margin, 0 0 6px 0);
1307
- --adyen-internal-text-rich-text-caption-paragraph-margin: var(--adyen-sdk-text-rich-text-caption-paragraph-margin, 0 0 6px 0);
1308
- --adyen-internal-text-rich-text-caption-list-padding-left: var(--adyen-sdk-text-rich-text-caption-list-padding-left, 16px);
1309
- --adyen-internal-text-rich-text-caption-list-margin: var(--adyen-sdk-text-rich-text-caption-list-margin, 0 0 2px 0);
1310
- --adyen-internal-text-rich-text-caption-blockquote-margin: var(--adyen-sdk-text-rich-text-caption-blockquote-margin, 12px 0 12px 16px);
1311
- --adyen-internal-text-rich-text-caption-pre-line-height: var(--adyen-sdk-text-rich-text-caption-pre-line-height, 20px);
1312
- --adyen-internal-text-rich-text-caption-table-padding: var(--adyen-sdk-text-rich-text-caption-table-padding, 8px 12px);
1313
- --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1314
- --adyen-internal-text-caption-font-family-secondary: var(--adyen-sdk-text-caption-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1315
- --adyen-internal-text-caption-font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1316
- --adyen-internal-text-caption-font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
1317
- --adyen-internal-text-caption-line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1318
- --adyen-internal-text-caption-letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
1319
- --adyen-internal-text-caption-wide-line-height: var(--adyen-sdk-text-caption-wide-line-height, 20px);
1320
- --adyen-internal-text-caption-stronger-font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
1321
- --adyen-internal-text-caption-stronger-wide-font-weight: var(--adyen-sdk-text-caption-stronger-wide-font-weight, 500);
1322
- --adyen-internal-text-caption-stronger-wide-line-height: var(--adyen-sdk-text-caption-stronger-wide-line-height, 20px);
1323
- --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1324
- --adyen-internal-text-body-font-family-secondary: var(--adyen-sdk-text-body-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1325
- --adyen-internal-text-body-font-size: var(--adyen-sdk-text-body-font-size, 14px);
1326
- --adyen-internal-text-body-font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1327
- --adyen-internal-text-body-line-height: var(--adyen-sdk-text-body-line-height, 20px);
1328
- --adyen-internal-text-body-letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
1329
- --adyen-internal-text-body-wide-line-height: var(--adyen-sdk-text-body-wide-line-height, 24px);
1330
- --adyen-internal-text-body-stronger-font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
1331
- --adyen-internal-text-body-stronger-wide-font-weight: var(--adyen-sdk-text-body-stronger-wide-font-weight, 500);
1332
- --adyen-internal-text-body-stronger-wide-line-height: var(--adyen-sdk-text-body-stronger-wide-line-height, 24px);
1333
- --adyen-internal-text-body-strongest-font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
1334
- --adyen-internal-text-body-strongest-wide-font-weight: var(--adyen-sdk-text-body-strongest-wide-font-weight, 600);
1335
- --adyen-internal-text-body-strongest-wide-line-height: var(--adyen-sdk-text-body-strongest-wide-line-height, 24px);
1336
- --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1337
- --adyen-internal-text-subtitle-font-size: var(--adyen-sdk-text-subtitle-font-size, 16px);
1338
- --adyen-internal-text-subtitle-font-weight: var(--adyen-sdk-text-subtitle-font-weight, 500);
1339
- --adyen-internal-text-subtitle-line-height: var(--adyen-sdk-text-subtitle-line-height, 26px);
1340
- --adyen-internal-text-subtitle-letter-spacing: var(--adyen-sdk-text-subtitle-letter-spacing, 0);
1341
- --adyen-internal-text-subtitle-stronger-font-weight: var(--adyen-sdk-text-subtitle-stronger-font-weight, 600);
1342
- --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1343
- --adyen-internal-text-title-font-family-secondary: var(--adyen-sdk-text-title-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1344
- --adyen-internal-text-title-font-size: var(--adyen-sdk-text-title-font-size, 16px);
1345
- --adyen-internal-text-title-font-weight: var(--adyen-sdk-text-title-font-weight, 600);
1346
- --adyen-internal-text-title-line-height: var(--adyen-sdk-text-title-line-height, 26px);
1347
- --adyen-internal-text-title-letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
1348
- --adyen-internal-text-title-mobile-font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
1349
- --adyen-internal-text-title-mobile-line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
1350
- --adyen-internal-text-title-m-font-family: var(--adyen-sdk-text-title-m-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1351
- --adyen-internal-text-title-m-font-family-secondary: var(--adyen-sdk-text-title-m-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1352
- --adyen-internal-text-title-m-font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
1353
- --adyen-internal-text-title-m-font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
1354
- --adyen-internal-text-title-m-line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
1355
- --adyen-internal-text-title-m-letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
1356
- --adyen-internal-text-title-m-mobile-font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
1357
- --adyen-internal-text-title-m-mobile-line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
1358
- --adyen-internal-text-title-l-font-family: var(--adyen-sdk-text-title-l-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1359
- --adyen-internal-text-title-l-font-family-secondary: var(--adyen-sdk-text-title-l-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1360
- --adyen-internal-text-title-l-font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
1361
- --adyen-internal-text-title-l-font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
1362
- --adyen-internal-text-title-l-line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
1363
- --adyen-internal-text-title-l-letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
1364
- --adyen-internal-text-title-l-mobile-font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
1365
- --adyen-internal-text-title-l-mobile-line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
1366
- --adyen-internal-focus-ring-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
1367
- --adyen-internal-focus-ring-spacer: var(--adyen-sdk-focus-ring-spacer, 1px);
1368
- --adyen-internal-focus-ring-outline: var(--adyen-sdk-focus-ring-outline, 3px);
1369
- --adyen-internal-spacer-100: var(--adyen-sdk-spacer-100, 32px);
1370
- --adyen-internal-spacer-110: var(--adyen-sdk-spacer-110, 40px);
1371
- --adyen-internal-spacer-120: var(--adyen-sdk-spacer-120, 48px);
1372
- --adyen-internal-spacer-130: var(--adyen-sdk-spacer-130, 56px);
1373
- --adyen-internal-spacer-140: var(--adyen-sdk-spacer-140, 64px);
1374
- --adyen-internal-spacer-000: var(--adyen-sdk-spacer-000, 0px);
1375
- --adyen-internal-spacer-010: var(--adyen-sdk-spacer-010, 2px);
1376
- --adyen-internal-spacer-020: var(--adyen-sdk-spacer-020, 4px);
1377
- --adyen-internal-spacer-030: var(--adyen-sdk-spacer-030, 6px);
1378
- --adyen-internal-spacer-040: var(--adyen-sdk-spacer-040, 8px);
1379
- --adyen-internal-spacer-050: var(--adyen-sdk-spacer-050, 10px);
1380
- --adyen-internal-spacer-060: var(--adyen-sdk-spacer-060, 12px);
1381
- --adyen-internal-spacer-070: var(--adyen-sdk-spacer-070, 16px);
1382
- --adyen-internal-spacer-080: var(--adyen-sdk-spacer-080, 20px);
1383
- --adyen-internal-spacer-090: var(--adyen-sdk-spacer-090, 24px);
1384
- --adyen-internal-media-query-xs-min: var(--adyen-sdk-media-query-xs-min, 0px);
1385
- --adyen-internal-media-query-xs-max: var(--adyen-sdk-media-query-xs-max, 375px);
1386
- --adyen-internal-media-query-s-min: var(--adyen-sdk-media-query-s-min, 376px);
1387
- --adyen-internal-media-query-s-max: var(--adyen-sdk-media-query-s-max, 499px);
1388
- --adyen-internal-media-query-m-min: var(--adyen-sdk-media-query-m-min, 500px);
1389
- --adyen-internal-media-query-m-max: var(--adyen-sdk-media-query-m-max, 767px);
1390
- --adyen-internal-media-query-l-min: var(--adyen-sdk-media-query-l-min, 768px);
1391
- --adyen-internal-media-query-l-max: var(--adyen-sdk-media-query-l-max, 1279px);
1392
- --adyen-internal-media-query-xl-min: var(--adyen-sdk-media-query-xl-min, 1280px);
1393
- --adyen-internal-media-query-xl-max: var(--adyen-sdk-media-query-xl-max, 1535px);
1394
- --adyen-internal-media-query-xxl: var(--adyen-sdk-media-query-xxl, 1536px);
1395
- --adyen-internal-shadow-low: var(--adyen-sdk-shadow-low, 0px 2px 4px rgba(0, 18, 34, 0.04), 0px 1px 2px rgba(0, 18, 34, 0.02));
1396
- --adyen-internal-shadow-medium: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04));
1397
- --adyen-internal-shadow-high: var(--adyen-sdk-shadow-high, 0px 18px 36px rgba(0, 18, 34, 0.12), 0px 4px 8px rgba(0, 18, 34, 0.06));
1398
- --adyen-internal-shadow-low-border: var(--adyen-sdk-shadow-low-border, 0px 2px 4px rgba(0, 18, 34, 0.04), 0px 1px 2px rgba(0, 18, 34, 0.02), 0px 0px 0px 1px rgba(218, 221, 223, 1));
1399
- --adyen-internal-shadow-medium-border: var(--adyen-sdk-shadow-medium-border, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04), 0px 0px 0px 1px rgba(218, 221, 223, 1));
1400
- --adyen-internal-shadow-high-border: var(--adyen-sdk-shadow-high-border, 0px 18px 36px rgba(0, 18, 34, 0.12), 0px 4px 8px rgba(0, 18, 34, 0.06), 0px 0px 0px 1px rgba(218, 221, 223, 1));
1401
- --adyen-internal-border-radius-xs: var(--adyen-sdk-border-radius-xs, 2px);
1402
- --adyen-internal-border-radius-s: var(--adyen-sdk-border-radius-s, 4px);
1403
- --adyen-internal-border-radius-m: var(--adyen-sdk-border-radius-m, 8px);
1404
- --adyen-internal-border-radius-l: var(--adyen-sdk-border-radius-l, 12px);
1405
- --adyen-internal-border-radius-xl: var(--adyen-sdk-border-radius-xl, 24px);
1406
- --adyen-internal-border-width-s: var(--adyen-sdk-border-width-s, 1px);
1407
- --adyen-internal-border-width-m: var(--adyen-sdk-border-width-m, 2px);
1408
- --adyen-internal-border-width-l: var(--adyen-sdk-border-width-l, 3px);
1409
- --adyen-internal-border-width-attention: var(--adyen-sdk-border-width-attention, 1.5px);
1410
- --adyen-internal-z-index-global-screen: var(--adyen-sdk-z-index-global-screen, auto);
1411
- --adyen-internal-z-index-global-elevated: var(--adyen-sdk-z-index-global-elevated, 5);
1412
- --adyen-internal-z-index-global-navigation: var(--adyen-sdk-z-index-global-navigation, 10);
1413
- --adyen-internal-z-index-global-instant-interaction: var(--adyen-sdk-z-index-global-instant-interaction, 15);
1414
- --adyen-internal-z-index-local-tier-1: var(--adyen-sdk-z-index-local-tier-1, 1);
1415
- --adyen-internal-z-index-local-tier-2: var(--adyen-sdk-z-index-local-tier-2, 2);
1416
- --adyen-internal-z-index-local-tier-3: var(--adyen-sdk-z-index-local-tier-3, 3);
1417
- --adyen-internal-z-index-local-tier-4: var(--adyen-sdk-z-index-local-tier-4, 4);
1418
- /** Setting font-family by default to inherit, unless specified otherwise */
1419
- --adyen-internal-text-rich-text-code-font-family: var(
1420
- --adyen-sdk-text-rich-text-code-font-family,
1421
- inherit
1422
- );
1423
- --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, inherit);
1424
- --adyen-internal-text-caption-font-family-secondary: var(
1425
- --adyen-sdk-text-caption-font-family-secondary,
1426
- inherit
1427
- );
1428
- --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, inherit);
1429
- --adyen-internal-text-body-font-family-secondary: var(
1430
- --adyen-sdk-text-body-font-family-secondary,
1431
- inherit
1432
- );
1433
- --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, inherit);
1434
- --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, inherit);
1435
- --adyen-internal-text-title-font-family-secondary: var(
1436
- --adyen-sdk-text-title-font-family-secondary,
1437
- inherit
1438
- );
1439
- --adyen-internal-text-title-m-font-family: var(--adyen-sdk-text-title-m-font-family, inherit);
1440
- --adyen-internal-text-title-m-font-family-secondary: var(
1441
- --adyen-sdk-text-title-m-font-family-secondary,
1442
- inherit
1443
- );
1444
- --adyen-internal-text-title-l-font-family: var(--adyen-sdk-text-title-l-font-family, inherit);
1445
- --adyen-internal-text-title-l-font-family-secondary: var(
1446
- --adyen-sdk-text-title-l-font-family-secondary,
1447
- inherit
1448
- );
1449
- --adyen-internal-tap-target: 44px;
1450
- --adyen-internal-border-default-s: var(--adyen-internal-border-width-s) solid
1451
- var(--adyen-internal-color-outline-primary);
1452
- --adyen-internal-border-default-m: var(--adyen-internal-border-width-m) solid
1453
- var(--adyen-internal-color-outline-primary);
1454
- --adyen-internal-border-default-l: var(--adyen-internal-border-width-l) solid
1455
- var(--adyen-internal-color-outline-primary);
1148
+ .adyen-kyc-u-margin-top-8 {
1149
+ margin-top: var(--adyen-internal-spacer-040, 8px) !important;
1456
1150
  }
1457
1151
 
1458
- .adyen-kyc-u-screen-reader-only {
1459
- border: 0;
1460
- clip: rect(0, 0, 0, 0);
1461
- height: 1px;
1462
- overflow: hidden;
1463
- padding: 0 !important;
1464
- position: absolute;
1465
- white-space: nowrap;
1466
- width: 1px;
1152
+ .adyen-kyc-u-margin-x-8 {
1153
+ margin-left: var(--adyen-internal-spacer-040, 8px) !important;
1154
+ margin-right: var(--adyen-internal-spacer-040, 8px) !important;
1467
1155
  }
1468
1156
 
1469
- fieldset {
1470
- border: none;
1471
- padding: 0;
1472
- margin: 0;
1473
- }.adyen-kyc-checkbox__label {
1474
- color: var(--adyen-internal-color-label-primary, #001222);
1475
- cursor: pointer;
1476
- display: inline-block;
1477
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1478
- font-weight: var(--adyen-internal-text-body-font-weight, 400);
1479
- line-height: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
1480
- padding-left: var(--adyen-internal-spacer-090, 24px);
1481
- position: relative;
1482
- user-select: none;
1483
- width: calc(100% - 32px); /* leaves space for the error icon */
1157
+ .adyen-kyc-u-margin-y-8 {
1158
+ margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;
1159
+ margin-top: var(--adyen-internal-spacer-040, 8px) !important;
1484
1160
  }
1485
- .adyen-kyc-checkbox__helper-text {
1486
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1487
- display: block;
1488
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1489
- padding-left: var(--adyen-internal-spacer-090, 24px);
1161
+
1162
+ .adyen-kyc-u-margin-10 {
1163
+ margin: var(--adyen-internal-spacer-050, 10px) !important;
1490
1164
  }
1491
1165
 
1492
- .adyen-kyc-checkbox__input {
1493
- opacity: 0;
1494
- pointer-events: none;
1495
- position: absolute;
1166
+ .adyen-kyc-u-margin-bottom-10 {
1167
+ margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;
1496
1168
  }
1497
- .adyen-kyc-checkbox__input:focus-visible + .adyen-kyc-checkbox__label::after {
1498
- box-shadow: 0 0 0 var(--adyen-internal-focus-ring-spacer, 1px) var(--adyen-internal-color-background-primary, #ffffff), 0 0 0 var(--adyen-internal-focus-ring-outline, 3px) var(--adyen-internal-focus-ring-color, rgba(15, 117, 220, 0.8));
1499
- transition: var(--adyen-internal-animation-duration-fast, 100ms) var(--adyen-internal-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
1500
- transition-property: box-shadow;
1169
+
1170
+ .adyen-kyc-u-margin-left-10 {
1171
+ margin-left: var(--adyen-internal-spacer-050, 10px) !important;
1172
+ }
1173
+
1174
+ .adyen-kyc-u-margin-right-10 {
1175
+ margin-right: var(--adyen-internal-spacer-050, 10px) !important;
1176
+ }
1177
+
1178
+ .adyen-kyc-u-margin-top-10 {
1179
+ margin-top: var(--adyen-internal-spacer-050, 10px) !important;
1180
+ }
1181
+
1182
+ .adyen-kyc-u-margin-x-10 {
1183
+ margin-left: var(--adyen-internal-spacer-050, 10px) !important;
1184
+ margin-right: var(--adyen-internal-spacer-050, 10px) !important;
1185
+ }
1186
+
1187
+ .adyen-kyc-u-margin-y-10 {
1188
+ margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;
1189
+ margin-top: var(--adyen-internal-spacer-050, 10px) !important;
1190
+ }
1191
+
1192
+ .adyen-kyc-u-margin-12 {
1193
+ margin: var(--adyen-internal-spacer-060, 12px) !important;
1194
+ }
1195
+
1196
+ .adyen-kyc-u-margin-bottom-12 {
1197
+ margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;
1198
+ }
1199
+
1200
+ .adyen-kyc-u-margin-left-12 {
1201
+ margin-left: var(--adyen-internal-spacer-060, 12px) !important;
1202
+ }
1203
+
1204
+ .adyen-kyc-u-margin-right-12 {
1205
+ margin-right: var(--adyen-internal-spacer-060, 12px) !important;
1501
1206
  }
1502
- .adyen-kyc-checkbox__input:hover + .adyen-kyc-checkbox__label::after {
1503
- background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
1207
+
1208
+ .adyen-kyc-u-margin-top-12 {
1209
+ margin-top: var(--adyen-internal-spacer-060, 12px) !important;
1504
1210
  }
1505
- .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::before {
1506
- opacity: 1;
1211
+
1212
+ .adyen-kyc-u-margin-x-12 {
1213
+ margin-left: var(--adyen-internal-spacer-060, 12px) !important;
1214
+ margin-right: var(--adyen-internal-spacer-060, 12px) !important;
1507
1215
  }
1508
- .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::after {
1509
- background-color: var(--adyen-internal-color-background-inverse-primary, #001222);
1510
- border-color: var(--adyen-internal-color-background-inverse-primary, #001222);
1216
+
1217
+ .adyen-kyc-u-margin-y-12 {
1218
+ margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;
1219
+ margin-top: var(--adyen-internal-spacer-060, 12px) !important;
1511
1220
  }
1512
- .adyen-kyc-checkbox__input:checked:hover + .adyen-kyc-checkbox__label::after {
1513
- background-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
1514
- border-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
1221
+
1222
+ .adyen-kyc-u-margin-16 {
1223
+ margin: var(--adyen-internal-spacer-070, 16px) !important;
1515
1224
  }
1516
- .adyen-kyc-checkbox__input {
1517
- /* Check */
1225
+
1226
+ .adyen-kyc-u-margin-bottom-16 {
1227
+ margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;
1518
1228
  }
1519
- .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::before {
1520
- border-bottom: var(--adyen-internal-border-width-m, 2px) solid var(--adyen-internal-color-background-primary, #ffffff);
1521
- border-right: var(--adyen-internal-border-width-m, 2px) solid var(--adyen-internal-color-background-primary, #ffffff);
1522
- content: "";
1523
- height: 7px;
1524
- left: 3px;
1525
- opacity: 0;
1526
- position: absolute;
1527
- top: 4px;
1528
- transform: rotateZ(37deg);
1529
- transform-origin: 100% 100%;
1530
- width: 5px;
1531
- z-index: 1;
1229
+
1230
+ .adyen-kyc-u-margin-left-16 {
1231
+ margin-left: var(--adyen-internal-spacer-070, 16px) !important;
1532
1232
  }
1533
- .adyen-kyc-checkbox__input {
1534
- /* Box */
1233
+
1234
+ .adyen-kyc-u-margin-right-16 {
1235
+ margin-right: var(--adyen-internal-spacer-070, 16px) !important;
1535
1236
  }
1536
- .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::after {
1537
- background-color: var(--adyen-internal-color-background-primary, #ffffff);
1538
- border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary, #8c959d);
1539
- border-radius: var(--adyen-internal-border-radius-s, 4px);
1540
- content: "";
1541
- height: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
1542
- left: 0;
1543
- position: absolute;
1544
- top: 0;
1545
- width: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
1546
- z-index: 0;
1547
- }.adyen-kyc-field {
1548
- display: block;
1549
- margin-bottom: var(--adyen-internal-spacer-090, 24px);
1550
- width: 100%;
1237
+
1238
+ .adyen-kyc-u-margin-top-16 {
1239
+ margin-top: var(--adyen-internal-spacer-070, 16px) !important;
1551
1240
  }
1552
- .adyen-kyc-field--disabled {
1553
- color: var(--adyen-internal-color-label-disabled, #8c959d);
1554
- opacity: 0.5;
1555
- pointer-events: none;
1241
+
1242
+ .adyen-kyc-u-margin-x-16 {
1243
+ margin-left: var(--adyen-internal-spacer-070, 16px) !important;
1244
+ margin-right: var(--adyen-internal-spacer-070, 16px) !important;
1556
1245
  }
1557
1246
 
1558
- .adyen-kyc-optional-label {
1559
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1247
+ .adyen-kyc-u-margin-y-16 {
1248
+ margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;
1249
+ margin-top: var(--adyen-internal-spacer-070, 16px) !important;
1560
1250
  }
1561
1251
 
1562
- .adyen-kyc-label__text {
1563
- color: var(--adyen-internal-color-label-primary, #001222);
1564
- display: block;
1565
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1566
- font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);
1567
- transition: color 0.1s ease-out;
1252
+ .adyen-kyc-u-margin-20 {
1253
+ margin: var(--adyen-internal-spacer-080, 20px) !important;
1568
1254
  }
1569
1255
 
1570
- .adyen-kyc-helper-text {
1571
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1572
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
1573
- font-family: var(--adyen-internal-text-caption-font-family);
1574
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
1575
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
1576
- display: flex;
1577
- align-items: center;
1256
+ .adyen-kyc-u-margin-bottom-20 {
1257
+ margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;
1578
1258
  }
1579
- .adyen-kyc-helper-text__above {
1580
- margin-bottom: var(--adyen-internal-spacer-020, 4px);
1259
+
1260
+ .adyen-kyc-u-margin-left-20 {
1261
+ margin-left: var(--adyen-internal-spacer-080, 20px) !important;
1581
1262
  }
1582
- .adyen-kyc-helper-text__below {
1583
- margin-top: var(--adyen-internal-spacer-020, 4px);
1263
+
1264
+ .adyen-kyc-u-margin-right-20 {
1265
+ margin-right: var(--adyen-internal-spacer-080, 20px) !important;
1584
1266
  }
1585
- .adyen-kyc-helper-text__valid-format-check {
1586
- color: var(--adyen-internal-color-label-success, #008845);
1587
- font-size: var(--adyen-internal-text-title-font-size, 16px);
1588
- font-family: var(--adyen-internal-text-title-font-family);
1589
- font-weight: var(--adyen-internal-text-title-font-weight, 600);
1590
- line-height: var(--adyen-internal-text-title-line-height, 26px);
1591
- display: inline-flex;
1267
+
1268
+ .adyen-kyc-u-margin-top-20 {
1269
+ margin-top: var(--adyen-internal-spacer-080, 20px) !important;
1592
1270
  }
1593
1271
 
1594
- .adyen-kyc-label__text--error {
1595
- color: var(--adyen-internal-color-label-critical, #dc3801);
1272
+ .adyen-kyc-u-margin-x-20 {
1273
+ margin-left: var(--adyen-internal-spacer-080, 20px) !important;
1274
+ margin-right: var(--adyen-internal-spacer-080, 20px) !important;
1596
1275
  }
1597
1276
 
1598
- .adyen-kyc-error-text {
1599
- align-items: center;
1600
- color: var(--adyen-internal-color-label-critical, #dc3801);
1601
- display: flex;
1602
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
1603
- font-family: var(--adyen-internal-text-caption-font-family);
1604
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
1605
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
1606
- margin-top: var(--adyen-internal-spacer-020, 4px);
1607
- position: relative;
1277
+ .adyen-kyc-u-margin-y-20 {
1278
+ margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;
1279
+ margin-top: var(--adyen-internal-spacer-080, 20px) !important;
1608
1280
  }
1609
1281
 
1610
- .adyen-kyc-guidance-text {
1611
- align-items: center;
1612
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1613
- display: flex;
1614
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
1615
- font-family: var(--adyen-internal-text-caption-font-family);
1616
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
1617
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
1618
- margin-top: var(--adyen-internal-spacer-020, 4px);
1619
- position: relative;
1282
+ .adyen-kyc-u-margin-24 {
1283
+ margin: var(--adyen-internal-spacer-090, 24px) !important;
1620
1284
  }
1621
1285
 
1622
- .adyen-kyc-upload-field__guidance {
1623
- display: flex;
1624
- flex-direction: column;
1286
+ .adyen-kyc-u-margin-bottom-24 {
1287
+ margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;
1625
1288
  }
1626
- .adyen-kyc-upload-field__subtitle {
1627
- color: var(--adyen-internal-color-label-primary, #001222);
1628
- margin: var(--adyen-internal-spacer-070, 16px) var(--adyen-internal-spacer-000, 0px);
1289
+
1290
+ .adyen-kyc-u-margin-left-24 {
1291
+ margin-left: var(--adyen-internal-spacer-090, 24px) !important;
1629
1292
  }
1630
1293
 
1631
- .adyen-kyc-input-wrapper {
1632
- display: block;
1633
- position: relative;
1634
- margin-top: var(--adyen-internal-spacer-040, 8px);
1294
+ .adyen-kyc-u-margin-right-24 {
1295
+ margin-right: var(--adyen-internal-spacer-090, 24px) !important;
1635
1296
  }
1636
- .adyen-kyc-input-wrapper--block {
1637
- display: block;
1638
- }.adyen-kyc-loader-wrapper-loader {
1639
- display: none;
1640
- height: 100%;
1641
- left: 0;
1642
- position: absolute;
1643
- top: 0;
1644
- width: 100%;
1645
- z-index: 1;
1297
+
1298
+ .adyen-kyc-u-margin-top-24 {
1299
+ margin-top: var(--adyen-internal-spacer-090, 24px) !important;
1646
1300
  }
1647
1301
 
1648
- .adyen-kyc-loader-wrapper-loader-active {
1649
- display: block;
1302
+ .adyen-kyc-u-margin-x-24 {
1303
+ margin-left: var(--adyen-internal-spacer-090, 24px) !important;
1304
+ margin-right: var(--adyen-internal-spacer-090, 24px) !important;
1650
1305
  }
1651
- /* for container queries */
1652
- .adyen-kyc-modal {
1653
- background-color: var(--adyen-internal-color-background-modal);
1654
- border: var(--adyen-internal-spacer-000);
1655
- box-shadow: var(--adyen-internal-shadow-high);
1656
- display: flex;
1657
- flex-direction: column;
1658
- height: 100vh;
1659
- height: 100dvh;
1660
- max-height: unset;
1661
- max-width: unset;
1662
- overflow: hidden;
1663
- padding: var(--adyen-internal-spacer-000);
1664
- position: fixed;
1665
- width: 100vw;
1666
- width: 100dvw;
1306
+
1307
+ .adyen-kyc-u-margin-y-24 {
1308
+ margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;
1309
+ margin-top: var(--adyen-internal-spacer-090, 24px) !important;
1667
1310
  }
1668
- .adyen-kyc-modal:focus-visible {
1669
- outline: none;
1311
+
1312
+ .adyen-kyc-u-margin-32 {
1313
+ margin: var(--adyen-internal-spacer-100, 32px) !important;
1670
1314
  }
1671
- @media (min-width: 480px) {
1672
- .adyen-kyc-modal {
1673
- transition: max-height 400ms, max-width 400ms;
1674
- }
1315
+
1316
+ .adyen-kyc-u-margin-bottom-32 {
1317
+ margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;
1675
1318
  }
1676
1319
 
1677
- .adyen-kyc-modal-small {
1678
- border-radius: var(--adyen-internal-border-radius-l);
1679
- max-height: 80vh;
1680
- max-width: 400px;
1681
- width: 80vw;
1682
- height: fit-content;
1320
+ .adyen-kyc-u-margin-left-32 {
1321
+ margin-left: var(--adyen-internal-spacer-100, 32px) !important;
1683
1322
  }
1684
1323
 
1685
- @media (min-width: 480px) {
1686
- .adyen-kyc-modal-medium {
1687
- border-radius: var(--adyen-internal-border-radius-l);
1688
- height: 90vh;
1689
- max-height: 600px;
1690
- max-width: 600px;
1691
- width: 90vw;
1692
- }
1324
+ .adyen-kyc-u-margin-right-32 {
1325
+ margin-right: var(--adyen-internal-spacer-100, 32px) !important;
1693
1326
  }
1694
1327
 
1695
- @media (min-width: 480px) {
1696
- .adyen-kyc-modal-large {
1697
- border-radius: var(--adyen-internal-border-radius-l);
1698
- height: 90vh;
1699
- max-height: 900px;
1700
- max-width: 900px;
1701
- width: 90vw;
1702
- }
1328
+ .adyen-kyc-u-margin-top-32 {
1329
+ margin-top: var(--adyen-internal-spacer-100, 32px) !important;
1703
1330
  }
1704
1331
 
1705
- .adyen-kyc-modal-body {
1706
- display: flex;
1707
- flex-direction: column;
1708
- overflow-y: auto;
1709
- scrollbar-width: thin;
1332
+ .adyen-kyc-u-margin-x-32 {
1333
+ margin-left: var(--adyen-internal-spacer-100, 32px) !important;
1334
+ margin-right: var(--adyen-internal-spacer-100, 32px) !important;
1710
1335
  }
1711
1336
 
1712
- .adyen-kyc-modal-body-height {
1713
- height: 100%;
1337
+ .adyen-kyc-u-margin-y-32 {
1338
+ margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;
1339
+ margin-top: var(--adyen-internal-spacer-100, 32px) !important;
1714
1340
  }
1715
1341
 
1716
- .adyen-kyc-modal-accessable-title {
1717
- display: none;
1342
+ .adyen-kyc-u-margin-40 {
1343
+ margin: var(--adyen-internal-spacer-110, 40px) !important;
1718
1344
  }
1719
1345
 
1720
- .adyen-kyc-modal-transition-slide-in {
1721
- animation-name: adyen-kyc-slide-in;
1722
- animation-duration: 400ms;
1723
- animation-timing-function: ease-out;
1346
+ .adyen-kyc-u-margin-bottom-40 {
1347
+ margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;
1724
1348
  }
1725
1349
 
1726
- .adyen-kyc-modal-transition-drop-in {
1727
- animation-name: adyen-kyc-drop-in;
1728
- animation-duration: 250ms;
1729
- animation-timing-function: ease;
1350
+ .adyen-kyc-u-margin-left-40 {
1351
+ margin-left: var(--adyen-internal-spacer-110, 40px) !important;
1730
1352
  }
1731
1353
 
1732
- .adyen-kyc-modal-inset {
1733
- padding: var(--adyen-internal-spacer-140) var(--adyen-internal-spacer-070);
1354
+ .adyen-kyc-u-margin-right-40 {
1355
+ margin-right: var(--adyen-internal-spacer-110, 40px) !important;
1734
1356
  }
1735
- @media (min-width: 480px) {
1736
- .adyen-kyc-modal-inset {
1737
- padding-left: var(--adyen-internal-spacer-100);
1738
- padding-right: var(--adyen-internal-spacer-100);
1739
- }
1357
+
1358
+ .adyen-kyc-u-margin-top-40 {
1359
+ margin-top: var(--adyen-internal-spacer-110, 40px) !important;
1740
1360
  }
1741
- @media (min-width: 680px) {
1742
- .adyen-kyc-modal-inset {
1743
- padding-left: calc(var(--adyen-internal-spacer-070) * 2 + var(--adyen-internal-tap-target));
1744
- padding-right: calc(var(--adyen-internal-spacer-070) * 2 + var(--adyen-internal-tap-target));
1745
- }
1361
+
1362
+ .adyen-kyc-u-margin-x-40 {
1363
+ margin-left: var(--adyen-internal-spacer-110, 40px) !important;
1364
+ margin-right: var(--adyen-internal-spacer-110, 40px) !important;
1746
1365
  }
1747
1366
 
1748
- .adyen-kyc-modal::backdrop {
1749
- animation-name: adyen-kyc-backdrop-dissolve;
1750
- animation-duration: 400ms;
1751
- animation-timing-function: ease;
1752
- background-color: var(--adyen-internal-color-support-overlay);
1753
- opacity: 0.5;
1754
- backdrop-filter: blur(10px);
1367
+ .adyen-kyc-u-margin-y-40 {
1368
+ margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;
1369
+ margin-top: var(--adyen-internal-spacer-110, 40px) !important;
1755
1370
  }
1756
1371
 
1757
- .adyen-kyc-modal-button {
1758
- position: absolute;
1759
- top: var(--adyen-internal-spacer-070);
1760
- right: var(--adyen-internal-spacer-070);
1761
- z-index: 10;
1372
+ .adyen-kyc-u-margin-48 {
1373
+ margin: var(--adyen-internal-spacer-120, 48px) !important;
1762
1374
  }
1763
1375
 
1764
- @keyframes adyen-kyc-backdrop-dissolve {
1765
- 0% {
1766
- opacity: 0;
1767
- }
1768
- 100% {
1769
- opacity: 0.5;
1770
- backdrop-filter: blur(10px);
1771
- }
1376
+ .adyen-kyc-u-margin-bottom-48 {
1377
+ margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
1772
1378
  }
1773
- @keyframes adyen-kyc-slide-in {
1774
- 0% {
1775
- opacity: 0;
1776
- top: 64px;
1777
- }
1778
- 100% {
1779
- opacity: 1;
1780
- top: 0;
1781
- }
1379
+
1380
+ .adyen-kyc-u-margin-left-48 {
1381
+ margin-left: var(--adyen-internal-spacer-120, 48px) !important;
1782
1382
  }
1783
- @keyframes adyen-kyc-drop-in {
1784
- 0% {
1785
- opacity: 0;
1786
- transform: scale(1.2);
1787
- }
1788
- 100% {
1789
- opacity: 1;
1790
- transform: scale(1);
1791
- }
1383
+
1384
+ .adyen-kyc-u-margin-right-48 {
1385
+ margin-right: var(--adyen-internal-spacer-120, 48px) !important;
1792
1386
  }
1793
- .adyen-kyc-modal-header {
1794
- align-items: center;
1795
- display: flex;
1796
- font-size: var(--adyen-internal-text-title-font-size);
1797
- font-weight: var(--adyen-internal-text-title-font-weight);
1798
- gap: var(--adyen-internal-spacer-040);
1799
- justify-content: space-between;
1800
- padding: var(--adyen-internal-spacer-070);
1387
+
1388
+ .adyen-kyc-u-margin-top-48 {
1389
+ margin-top: var(--adyen-internal-spacer-120, 48px) !important;
1801
1390
  }
1802
1391
 
1803
- .adyen-kyc-modal-content {
1804
- flex-grow: 1;
1805
- overflow-y: auto;
1806
- padding: var(--adyen-internal-spacer-070);
1392
+ .adyen-kyc-u-margin-x-48 {
1393
+ margin-left: var(--adyen-internal-spacer-120, 48px) !important;
1394
+ margin-right: var(--adyen-internal-spacer-120, 48px) !important;
1807
1395
  }
1808
1396
 
1809
- .adyen-kyc-modal-footer {
1810
- align-items: center;
1811
- border-top: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-primary);
1812
- display: flex;
1813
- gap: var(--adyen-internal-spacer-040);
1814
- justify-content: flex-end;
1815
- padding: var(--adyen-internal-spacer-070);
1816
- }.adyen-kyc-progress-bar {
1817
- --adyen-progress-bar-size: 4px;
1818
- background-color: var(--adyen-internal-color-background-secondary);
1819
- height: var(--adyen-progress-bar-size);
1820
- overflow: hidden;
1397
+ .adyen-kyc-u-margin-y-48 {
1398
+ margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
1399
+ margin-top: var(--adyen-internal-spacer-120, 48px) !important;
1821
1400
  }
1822
1401
 
1823
- .adyen-kyc-progress-bar-rounded {
1824
- border-radius: calc(var(--adyen-progress-bar-size) / 2);
1402
+ /* for container queries */
1403
+ .adyen-kyc-u-width-full {
1404
+ width: 100% !important;
1825
1405
  }
1826
1406
 
1827
- .adyen-kyc-progress-bar-indicator {
1828
- background-color: var(--adyen-internal-color-background-inverse-primary);
1829
- text-indent: -1000%;
1830
- transition: width 400ms;
1831
- overflow: hidden;
1407
+ .adyen-kyc-u-width-half {
1408
+ width: 50% !important;
1832
1409
  }
1833
- /* for container queries */
1834
- .adyen-kyc-dropdown {
1835
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1836
- max-width: 100%;
1410
+
1411
+ /* Topmost/root container class */
1412
+ .adyen-kyc-ui-element-container-wrapper {
1837
1413
  width: 100%;
1414
+ overflow: auto;
1415
+ /**
1416
+ * main container query, used similarly to a @media query
1417
+ * considering our Component can be embedded in a container of arbitrary size
1418
+ * that does not necessarily match the whole window/screen size.
1419
+ * Uses s and l breakpoints defined in variables.
1420
+ */
1421
+ container-type: inline-size;
1422
+ container-name: main;
1838
1423
  }
1839
1424
 
1840
- .adyen-kyc-dropdown--minimal {
1841
- max-width: 120px;
1425
+ .adyen-kyc-ui-element-container-wrapper *,
1426
+ .adyen-kyc-ui-element-container-wrapper *::after,
1427
+ .adyen-kyc-ui-element-container-wrapper *::before {
1428
+ box-sizing: border-box;
1842
1429
  }
1843
1430
 
1844
- .adyen-kyc-dropdown-list {
1431
+ .adyen-kyc-ui-element-container {
1432
+ background-color: var(--adyen-internal-color-background-primary, #ffffff);
1433
+ position: relative;
1434
+ padding: var(--adyen-internal-spacer-100, 32px);
1845
1435
  border-radius: var(--adyen-internal-border-radius-m, 8px);
1846
- box-shadow: var(--adyen-internal-shadow-medium-border, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04), 0px 0px 0px 1px rgba(218, 221, 223, 1));
1847
- z-index: 2;
1436
+ font-family: var(--adyen-internal-text-body-font-family);
1437
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
1438
+ font-weight: var(--adyen-internal-text-body-font-weight, 400);
1439
+ line-height: var(--adyen-internal-text-body-line-height, 20px);
1440
+ color: var(--adyen-internal-color-label-primary, #001222);
1848
1441
  }
1849
- .adyen-kyc-dropdown-list .adyen-kyc-checkbox__helper-text {
1850
- cursor: pointer;
1442
+ .adyen-kyc-ui-element-container p,
1443
+ .adyen-kyc-ui-element-container ol,
1444
+ .adyen-kyc-ui-element-container ul {
1445
+ margin-bottom: 0;
1446
+ margin-top: 0;
1447
+ }
1448
+ .adyen-kyc-ui-element-container ul,
1449
+ .adyen-kyc-ui-element-container ol {
1450
+ padding-left: 1.5em;
1451
+ }
1452
+ @container main (max-width: 680px) {
1453
+ .adyen-kyc-ui-element-container {
1454
+ padding: var(--adyen-internal-spacer-070, 16px);
1455
+ }
1851
1456
  }
1852
1457
 
1853
- .adyen-kyc-dropdown-list--above {
1854
- bottom: -6px;
1458
+ /*
1459
+ * Compatibility later to ensure components do NOT receive extra padding
1460
+ * as is the case with dropins, without breaking dropins.
1461
+ * Once the Component Layout has been done `.adyen-kyc-externalComponent`
1462
+ * can be safely removed everywere.
1463
+ */
1464
+ .adyen-kyc-ui-element-container:has(.adyen-kyc-externalComponent) {
1465
+ padding: 0;
1855
1466
  }
1856
1467
 
1857
- .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
1858
- margin-top: var(--adyen-internal-spacer-010, 2px);
1468
+ /**
1469
+ * :root is needed for non-web components, while :host for web components (TODO: change on v4)
1470
+ *
1471
+ * This produces css like:
1472
+ * --adyen-internal-text-color: var(--adyen-sdk-text-color, #000);
1473
+ *
1474
+ * The `internal` part matches how we use css variables in the code
1475
+ * The `sdk` part is how consumers customize it from outside our code
1476
+ * The $value is the fallback bare value, used when the variable was not customized
1477
+ *
1478
+ * The reason we have `internal` and `sdk` is because doing something like:
1479
+ * --color: var(--color, #0f0) would create a loop, and the browser ignores it.
1480
+ *
1481
+ */
1482
+ :root,
1483
+ :host {
1484
+ --adyen-internal-animation-easing-standard: var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
1485
+ --adyen-internal-animation-easing-enter: var(--adyen-sdk-animation-easing-enter, cubic-bezier(0.12, 0.6, 0.4, 0.95));
1486
+ --adyen-internal-animation-easing-exit: var(--adyen-sdk-animation-easing-exit, cubic-bezier(0.4, 0, 1, 1));
1487
+ --adyen-internal-animation-easing-linear: var(--adyen-sdk-animation-easing-linear, linear);
1488
+ --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
1489
+ --adyen-internal-animation-duration-moderate: var(--adyen-sdk-animation-duration-moderate, 150ms);
1490
+ --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
1491
+ --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #ffffff);
1492
+ --adyen-internal-color-background-primary-hover: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);
1493
+ --adyen-internal-color-background-primary-active: var(--adyen-sdk-color-background-primary-active, #ecedef);
1494
+ --adyen-internal-color-background-secondary: var(--adyen-sdk-color-background-secondary, #f4f5f6);
1495
+ --adyen-internal-color-background-secondary-hover: var(--adyen-sdk-color-background-secondary-hover, #ecedef);
1496
+ --adyen-internal-color-background-secondary-active: var(--adyen-sdk-color-background-secondary-active, #e2e5e7);
1497
+ --adyen-internal-color-background-tertiary: var(--adyen-sdk-color-background-tertiary, #ecedef);
1498
+ --adyen-internal-color-background-tertiary-hover: var(--adyen-sdk-color-background-tertiary-hover, #e2e5e7);
1499
+ --adyen-internal-color-background-tertiary-active: var(--adyen-sdk-color-background-tertiary-active, #dadddf);
1500
+ --adyen-internal-color-background-quaternary: var(--adyen-sdk-color-background-quaternary, #c0c5ca);
1501
+ --adyen-internal-color-background-quaternary-hover: var(--adyen-sdk-color-background-quaternary-hover, #b7bdc2);
1502
+ --adyen-internal-color-background-quaternary-active: var(--adyen-sdk-color-background-quaternary-active, #aeb5ba);
1503
+ --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #ffffff);
1504
+ --adyen-internal-color-background-modal-hover: var(--adyen-sdk-color-background-modal-hover, #f4f5f6);
1505
+ --adyen-internal-color-background-modal-active: var(--adyen-sdk-color-background-modal-active, #ecedef);
1506
+ --adyen-internal-color-background-disabled: var(--adyen-sdk-color-background-disabled, #ecedef);
1507
+ --adyen-internal-color-background-selected: var(--adyen-sdk-color-background-selected, #e3effb);
1508
+ --adyen-internal-color-background-selected-hover: var(--adyen-sdk-color-background-selected-hover, #d4e6f9);
1509
+ --adyen-internal-color-background-selected-active: var(--adyen-sdk-color-background-selected-active, #c8dff7);
1510
+ --adyen-internal-color-background-spotlight: var(--adyen-sdk-color-background-spotlight, #ffe379);
1511
+ --adyen-internal-color-background-critical-weak: var(--adyen-sdk-color-background-critical-weak, #fff3ef);
1512
+ --adyen-internal-color-background-critical-strong: var(--adyen-sdk-color-background-critical-strong, #dc3801);
1513
+ --adyen-internal-color-background-critical-strong-hover: var(--adyen-sdk-color-background-critical-strong-hover, #c13101);
1514
+ --adyen-internal-color-background-critical-strong-active: var(--adyen-sdk-color-background-critical-strong-active, #751e00);
1515
+ --adyen-internal-color-background-warning-weak: var(--adyen-sdk-color-background-warning-weak, #fff4e5);
1516
+ --adyen-internal-color-background-warning-weak-hover: var(--adyen-sdk-color-background-warning-weak-hover, #ffecd0);
1517
+ --adyen-internal-color-background-warning-weak-active: var(--adyen-sdk-color-background-warning-weak-active, #ffe0b3);
1518
+ --adyen-internal-color-background-warning-strong: var(--adyen-sdk-color-background-warning-strong, #d77f00);
1519
+ --adyen-internal-color-background-success-weak: var(--adyen-sdk-color-background-success-weak, #e4faef);
1520
+ --adyen-internal-color-background-success-strong: var(--adyen-sdk-color-background-success-strong, #008845);
1521
+ --adyen-internal-color-background-highlight-weak: var(--adyen-sdk-color-background-highlight-weak, #f0f6fd);
1522
+ --adyen-internal-color-background-highlight-strong: var(--adyen-sdk-color-background-highlight-strong, #0f75dc);
1523
+ --adyen-internal-color-background-inverse-primary: var(--adyen-sdk-color-background-inverse-primary, #001222);
1524
+ --adyen-internal-color-background-inverse-primary-hover: var(--adyen-sdk-color-background-inverse-primary-hover, #5c6874);
1525
+ --adyen-internal-color-background-inverse-primary-active: var(--adyen-sdk-color-background-inverse-primary-active, #6c7782);
1526
+ --adyen-internal-color-background-inverse-secondary: var(--adyen-sdk-color-background-inverse-secondary, #1a2b3b);
1527
+ --adyen-internal-color-background-inverse-secondary-hover: var(--adyen-sdk-color-background-inverse-secondary-hover, #273746);
1528
+ --adyen-internal-color-background-inverse-secondary-active: var(--adyen-sdk-color-background-inverse-secondary-active, #364553);
1529
+ --adyen-internal-color-background-inverse-disabled: var(--adyen-sdk-color-background-inverse-disabled, #273746);
1530
+ --adyen-internal-color-background-inverse-critical-weak: var(--adyen-sdk-color-background-inverse-critical-weak, #5c1800);
1531
+ --adyen-internal-color-background-inverse-critical-strong: var(--adyen-sdk-color-background-inverse-critical-strong, #ff9a78);
1532
+ --adyen-internal-color-background-inverse-critical-strong-hover: var(--adyen-sdk-color-background-inverse-critical-strong-hover, #ffbda6);
1533
+ --adyen-internal-color-background-inverse-critical-strong-active: var(--adyen-sdk-color-background-inverse-critical-strong-active, #ffded3);
1534
+ --adyen-internal-color-background-always-light: var(--adyen-sdk-color-background-always-light, #ffffff);
1535
+ --adyen-internal-color-background-always-light-hover: var(--adyen-sdk-color-background-always-light-hover, #f4f5f6);
1536
+ --adyen-internal-color-background-always-light-active: var(--adyen-sdk-color-background-always-light-active, #ecedef);
1537
+ --adyen-internal-color-background-always-light-disabled: var(--adyen-sdk-color-background-always-light-disabled, #ecedef);
1538
+ --adyen-internal-color-background-always-light-selected: var(--adyen-sdk-color-background-always-light-selected, #e3effb);
1539
+ --adyen-internal-color-background-always-dark: var(--adyen-sdk-color-background-always-dark, #001222);
1540
+ --adyen-internal-color-background-always-dark-hover: var(--adyen-sdk-color-background-always-dark-hover, #5c6874);
1541
+ --adyen-internal-color-background-always-dark-active: var(--adyen-sdk-color-background-always-dark-active, #8c959d);
1542
+ --adyen-internal-color-background-always-dark-disabled: var(--adyen-sdk-color-background-always-dark-disabled, #ecedef);
1543
+ --adyen-internal-color-background-always-dark-selected: var(--adyen-sdk-color-background-always-dark-selected, #00305f);
1544
+ --adyen-internal-color-background-always-dark-primary: var(--adyen-sdk-color-background-always-dark-primary, #001222);
1545
+ --adyen-internal-color-background-always-dark-primary-hover: var(--adyen-sdk-color-background-always-dark-primary-hover, #132434);
1546
+ --adyen-internal-color-background-always-dark-primary-active: var(--adyen-sdk-color-background-always-dark-primary-active, #213140);
1547
+ --adyen-internal-color-background-always-dark-primary-disabled: var(--adyen-sdk-color-background-always-dark-primary-disabled, #ecedef);
1548
+ --adyen-internal-color-background-always-dark-primary-selected: var(--adyen-sdk-color-background-always-dark-primary-selected, #00305f);
1549
+ --adyen-internal-color-background-always-dark-secondary: var(--adyen-sdk-color-background-always-dark-secondary, #213140);
1550
+ --adyen-internal-color-background-always-dark-secondary-hover: var(--adyen-sdk-color-background-always-dark-secondary-hover, #364553);
1551
+ --adyen-internal-color-background-always-dark-secondary-active: var(--adyen-sdk-color-background-always-dark-secondary-active, #455460);
1552
+ --adyen-internal-color-background-always-dark-secondary-disabled: var(--adyen-sdk-color-background-always-dark-secondary-disabled, #ecedef);
1553
+ --adyen-internal-color-background-always-dark-secondary-selected: var(--adyen-sdk-color-background-always-dark-secondary-selected, #00305f);
1554
+ --adyen-internal-color-background-always-dark-tertiary: var(--adyen-sdk-color-background-always-dark-tertiary, #2f3e4d);
1555
+ --adyen-internal-color-background-always-dark-tertiary-hover: var(--adyen-sdk-color-background-always-dark-tertiary-hover, #3d4c5a);
1556
+ --adyen-internal-color-background-always-dark-tertiary-active: var(--adyen-sdk-color-background-always-dark-tertiary-active, #455460);
1557
+ --adyen-internal-color-background-always-dark-tertiary-disabled: var(--adyen-sdk-color-background-always-dark-tertiary-disabled, #ecedef);
1558
+ --adyen-internal-color-background-always-dark-tertiary-selected: var(--adyen-sdk-color-background-always-dark-tertiary-selected, #00305f);
1559
+ --adyen-internal-color-label-primary: var(--adyen-sdk-color-label-primary, #001222);
1560
+ --adyen-internal-color-label-primary-hover: var(--adyen-sdk-color-label-primary-hover, #5c6874);
1561
+ --adyen-internal-color-label-primary-active: var(--adyen-sdk-color-label-primary-active, #6c7782);
1562
+ --adyen-internal-color-label-secondary: var(--adyen-sdk-color-label-secondary, #5c6874);
1563
+ --adyen-internal-color-label-tertiary: var(--adyen-sdk-color-label-tertiary, #8c959d);
1564
+ --adyen-internal-color-label-disabled: var(--adyen-sdk-color-label-disabled, #8c959d);
1565
+ --adyen-internal-color-label-critical: var(--adyen-sdk-color-label-critical, #dc3801);
1566
+ --adyen-internal-color-label-critical-hover: var(--adyen-sdk-color-label-critical-hover, #c13101);
1567
+ --adyen-internal-color-label-critical-active: var(--adyen-sdk-color-label-critical-active, #751e00);
1568
+ --adyen-internal-color-label-warning: var(--adyen-sdk-color-label-warning, #ab6600);
1569
+ --adyen-internal-color-label-highlight: var(--adyen-sdk-color-label-highlight, #0f75dc);
1570
+ --adyen-internal-color-label-success: var(--adyen-sdk-color-label-success, #008845);
1571
+ --adyen-internal-color-label-on-color: var(--adyen-sdk-color-label-on-color, #ffffff);
1572
+ --adyen-internal-color-label-inverse-primary: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
1573
+ --adyen-internal-color-label-inverse-primary-hover: var(--adyen-sdk-color-label-inverse-primary-hover, #f4f5f6);
1574
+ --adyen-internal-color-label-inverse-primary-active: var(--adyen-sdk-color-label-inverse-primary-active, #ecedef);
1575
+ --adyen-internal-color-label-inverse-secondary: var(--adyen-sdk-color-label-inverse-secondary, #9da5ac);
1576
+ --adyen-internal-color-label-inverse-disabled: var(--adyen-sdk-color-label-inverse-disabled, #737e88);
1577
+ --adyen-internal-color-label-inverse-critical: var(--adyen-sdk-color-label-inverse-critical, #ff9a78);
1578
+ --adyen-internal-color-label-inverse-critical-hover: var(--adyen-sdk-color-label-inverse-critical-hover, #ffbda6);
1579
+ --adyen-internal-color-label-inverse-critical-active: var(--adyen-sdk-color-label-inverse-critical-active, #ffded3);
1580
+ --adyen-internal-color-label-on-background-critical-weak: var(--adyen-sdk-color-label-on-background-critical-weak, #c13101);
1581
+ --adyen-internal-color-label-on-background-warning-weak: var(--adyen-sdk-color-label-on-background-warning-weak, #955900);
1582
+ --adyen-internal-color-label-on-background-success-weak: var(--adyen-sdk-color-label-on-background-success-weak, #00773c);
1583
+ --adyen-internal-color-label-on-background-highlight-weak: var(--adyen-sdk-color-label-on-background-highlight-weak, #0065c9);
1584
+ --adyen-internal-color-label-always-light: var(--adyen-sdk-color-label-always-light, #ffffff);
1585
+ --adyen-internal-color-label-always-light-primary: var(--adyen-sdk-color-label-always-light-primary, #ecedef);
1586
+ --adyen-internal-color-label-always-light-primary-hover: var(--adyen-sdk-color-label-always-light-primary-hover, #c8ccd0);
1587
+ --adyen-internal-color-label-always-light-primary-active: var(--adyen-sdk-color-label-always-light-primary-active, #959da5);
1588
+ --adyen-internal-color-label-always-light-secondary: var(--adyen-sdk-color-label-always-light-secondary, #a6adb3);
1589
+ --adyen-internal-color-label-always-light-secondary-hover: var(--adyen-sdk-color-label-always-light-secondary-hover, #959da5);
1590
+ --adyen-internal-color-label-always-light-secondary-active: var(--adyen-sdk-color-label-always-light-secondary-active, #737e88);
1591
+ --adyen-internal-color-label-always-light-tertiary: var(--adyen-sdk-color-label-always-light-tertiary, #848d96);
1592
+ --adyen-internal-color-label-always-light-tertiary-hover: var(--adyen-sdk-color-label-always-light-tertiary-hover, #737e88);
1593
+ --adyen-internal-color-label-always-light-tertiary-active: var(--adyen-sdk-color-label-always-light-tertiary-active, #54616d);
1594
+ --adyen-internal-color-label-always-dark: var(--adyen-sdk-color-label-always-dark, #001222);
1595
+ --adyen-internal-color-link-primary: var(--adyen-sdk-color-link-primary, #0065c9);
1596
+ --adyen-internal-color-link-primary-hover: var(--adyen-sdk-color-link-primary-hover, #0f75dc);
1597
+ --adyen-internal-color-link-primary-active: var(--adyen-sdk-color-link-primary-active, #0f75dc);
1598
+ --adyen-internal-color-link-primary-disabled: var(--adyen-sdk-color-link-primary-disabled, #8c959d);
1599
+ --adyen-internal-color-link-primary-visited: var(--adyen-sdk-color-link-primary-visited, #540884);
1600
+ --adyen-internal-color-link-primary-visited-hover: var(--adyen-sdk-color-link-primary-visited-hover, #710ab3);
1601
+ --adyen-internal-color-link-primary-visited-active: var(--adyen-sdk-color-link-primary-visited-active, #710ab3);
1602
+ --adyen-internal-color-link-quiet: var(--adyen-sdk-color-link-quiet, #001222);
1603
+ --adyen-internal-color-link-quiet-hover: var(--adyen-sdk-color-link-quiet-hover, #5c6874);
1604
+ --adyen-internal-color-link-quiet-active: var(--adyen-sdk-color-link-quiet-active, #5c6874);
1605
+ --adyen-internal-color-link-quiet-disabled: var(--adyen-sdk-color-link-quiet-disabled, #8c959d);
1606
+ --adyen-internal-color-outline-primary: var(--adyen-sdk-color-outline-primary, #dadddf);
1607
+ --adyen-internal-color-outline-primary-hover: var(--adyen-sdk-color-outline-primary-hover, #c8ccd0);
1608
+ --adyen-internal-color-outline-primary-active: var(--adyen-sdk-color-outline-primary-active, #001222);
1609
+ --adyen-internal-color-outline-secondary: var(--adyen-sdk-color-outline-secondary, #c8ccd0);
1610
+ --adyen-internal-color-outline-secondary-hover: var(--adyen-sdk-color-outline-secondary-hover, #b7bdc2);
1611
+ --adyen-internal-color-outline-secondary-active: var(--adyen-sdk-color-outline-secondary-active, #001222);
1612
+ --adyen-internal-color-outline-tertiary: var(--adyen-sdk-color-outline-tertiary, #8c959d);
1613
+ --adyen-internal-color-outline-tertiary-hover: var(--adyen-sdk-color-outline-tertiary-hover, #6c7782);
1614
+ --adyen-internal-color-outline-tertiary-active: var(--adyen-sdk-color-outline-tertiary-active, #001222);
1615
+ --adyen-internal-color-outline-disabled: var(--adyen-sdk-color-outline-disabled, #dadddf);
1616
+ --adyen-internal-color-outline-selected: var(--adyen-sdk-color-outline-selected, #001222);
1617
+ --adyen-internal-color-outline-critical: var(--adyen-sdk-color-outline-critical, #dc3801);
1618
+ --adyen-internal-color-outline-critical-hover: var(--adyen-sdk-color-outline-critical-hover, #c13101);
1619
+ --adyen-internal-color-outline-critical-active: var(--adyen-sdk-color-outline-critical-active, #751e00);
1620
+ --adyen-internal-color-outline-success: var(--adyen-sdk-color-outline-success, #008845);
1621
+ --adyen-internal-color-outline-success-hover: var(--adyen-sdk-color-outline-success-hover, #00773c);
1622
+ --adyen-internal-color-outline-success-active: var(--adyen-sdk-color-outline-success-active, #004724);
1623
+ --adyen-internal-color-outline-inverse-primary: var(--adyen-sdk-color-outline-inverse-primary, #2f3e4d);
1624
+ --adyen-internal-color-outline-inverse-primary-hover: var(--adyen-sdk-color-outline-inverse-primary-hover, #6c7782);
1625
+ --adyen-internal-color-outline-inverse-primary-active: var(--adyen-sdk-color-outline-inverse-primary-active, #9da5ac);
1626
+ --adyen-internal-color-outline-inverse-disabled: var(--adyen-sdk-color-outline-inverse-disabled, #455460);
1627
+ --adyen-internal-color-outline-inverse-critical: var(--adyen-sdk-color-outline-inverse-critical, #ff9a78);
1628
+ --adyen-internal-color-outline-inverse-critical-hover: var(--adyen-sdk-color-outline-inverse-critical-hover, #ffbda6);
1629
+ --adyen-internal-color-outline-inverse-critical-active: var(--adyen-sdk-color-outline-inverse-critical-active, #ffded3);
1630
+ --adyen-internal-color-separator-primary: var(--adyen-sdk-color-separator-primary, #dadddf);
1631
+ --adyen-internal-color-separator-secondary: var(--adyen-sdk-color-separator-secondary, #c8ccd0);
1632
+ --adyen-internal-color-separator-inverse-primary: var(--adyen-sdk-color-separator-inverse-primary, #2f3e4d);
1633
+ --adyen-internal-color-separator-inverse-secondary: var(--adyen-sdk-color-separator-inverse-secondary, #5c6874);
1634
+ --adyen-internal-color-decorative-green: var(--adyen-sdk-color-decorative-green, #00d16a);
1635
+ --adyen-internal-color-decorative-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
1636
+ --adyen-internal-color-decorative-yellow: var(--adyen-sdk-color-decorative-yellow, #f9c500);
1637
+ --adyen-internal-color-decorative-orange: var(--adyen-sdk-color-decorative-orange, #f99300);
1638
+ --adyen-internal-color-decorative-red: var(--adyen-sdk-color-decorative-red, #f73f01);
1639
+ --adyen-internal-color-decorative-grey: var(--adyen-sdk-color-decorative-grey, #848d96);
1640
+ --adyen-internal-color-support-overlay: var(--adyen-sdk-color-support-overlay, #001222);
1641
+ --adyen-internal-color-support-shadow: var(--adyen-sdk-color-support-shadow, #001222);
1642
+ --adyen-internal-text-font-variant-numeric: var(--adyen-sdk-text-font-variant-numeric, normal);
1643
+ --adyen-internal-text-rich-text-heading-margin: var(--adyen-sdk-text-rich-text-heading-margin, 32px 0 10px 0);
1644
+ --adyen-internal-text-rich-text-heading-font-weight: var(--adyen-sdk-text-rich-text-heading-font-weight, 700);
1645
+ --adyen-internal-text-rich-text-paragraph-margin: var(--adyen-sdk-text-rich-text-paragraph-margin, 0 0 8px 0);
1646
+ --adyen-internal-text-rich-text-list-padding-left: var(--adyen-sdk-text-rich-text-list-padding-left, 20px);
1647
+ --adyen-internal-text-rich-text-list-margin: var(--adyen-sdk-text-rich-text-list-margin, 0 0 4px 0);
1648
+ --adyen-internal-text-rich-text-code-background-color: var(--adyen-sdk-text-rich-text-code-background-color, #f4f5f6);
1649
+ --adyen-internal-text-rich-text-code-font-family: var(--adyen-sdk-text-rich-text-code-font-family, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1650
+ --adyen-internal-text-rich-text-code-font-weight: var(--adyen-sdk-text-rich-text-code-font-weight, 500);
1651
+ --adyen-internal-text-rich-text-pre-margin: var(--adyen-sdk-text-rich-text-pre-margin, 16px 0 16px 0);
1652
+ --adyen-internal-text-rich-text-pre-padding: var(--adyen-sdk-text-rich-text-pre-padding, 10px 16px);
1653
+ --adyen-internal-text-rich-text-pre-line-height: var(--adyen-sdk-text-rich-text-pre-line-height, 24px);
1654
+ --adyen-internal-text-rich-text-mark-background-color: var(--adyen-sdk-text-rich-text-mark-background-color, #f0f6fd);
1655
+ --adyen-internal-text-rich-text-blockquote-font-weight: var(--adyen-sdk-text-rich-text-blockquote-font-weight, 500);
1656
+ --adyen-internal-text-rich-text-blockquote-margin: var(--adyen-sdk-text-rich-text-blockquote-margin, 16px 0 16px 16px);
1657
+ --adyen-internal-text-rich-text-table-border: var(--adyen-sdk-text-rich-text-table-border, 1px solid #dadddf);
1658
+ --adyen-internal-text-rich-text-table-line-height: var(--adyen-sdk-text-rich-text-table-line-height, 20px);
1659
+ --adyen-internal-text-rich-text-table-margin: var(--adyen-sdk-text-rich-text-table-margin, 16px 0 16px 0);
1660
+ --adyen-internal-text-rich-text-table-padding: var(--adyen-sdk-text-rich-text-table-padding, 10px 16px);
1661
+ --adyen-internal-text-rich-text-table-header-font-weight: var(--adyen-sdk-text-rich-text-table-header-font-weight, 700);
1662
+ --adyen-internal-text-rich-text-table-caption-line-height: var(--adyen-sdk-text-rich-text-table-caption-line-height, 20px);
1663
+ --adyen-internal-text-rich-text-table-caption-margin: var(--adyen-sdk-text-rich-text-table-caption-margin, 0 0 6px 0);
1664
+ --adyen-internal-text-rich-text-caption-paragraph-margin: var(--adyen-sdk-text-rich-text-caption-paragraph-margin, 0 0 6px 0);
1665
+ --adyen-internal-text-rich-text-caption-list-padding-left: var(--adyen-sdk-text-rich-text-caption-list-padding-left, 16px);
1666
+ --adyen-internal-text-rich-text-caption-list-margin: var(--adyen-sdk-text-rich-text-caption-list-margin, 0 0 2px 0);
1667
+ --adyen-internal-text-rich-text-caption-blockquote-margin: var(--adyen-sdk-text-rich-text-caption-blockquote-margin, 12px 0 12px 16px);
1668
+ --adyen-internal-text-rich-text-caption-pre-line-height: var(--adyen-sdk-text-rich-text-caption-pre-line-height, 20px);
1669
+ --adyen-internal-text-rich-text-caption-table-padding: var(--adyen-sdk-text-rich-text-caption-table-padding, 8px 12px);
1670
+ --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1671
+ --adyen-internal-text-caption-font-family-secondary: var(--adyen-sdk-text-caption-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1672
+ --adyen-internal-text-caption-font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1673
+ --adyen-internal-text-caption-font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
1674
+ --adyen-internal-text-caption-line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1675
+ --adyen-internal-text-caption-letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
1676
+ --adyen-internal-text-caption-wide-line-height: var(--adyen-sdk-text-caption-wide-line-height, 20px);
1677
+ --adyen-internal-text-caption-stronger-font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
1678
+ --adyen-internal-text-caption-stronger-wide-font-weight: var(--adyen-sdk-text-caption-stronger-wide-font-weight, 500);
1679
+ --adyen-internal-text-caption-stronger-wide-line-height: var(--adyen-sdk-text-caption-stronger-wide-line-height, 20px);
1680
+ --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1681
+ --adyen-internal-text-body-font-family-secondary: var(--adyen-sdk-text-body-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1682
+ --adyen-internal-text-body-font-size: var(--adyen-sdk-text-body-font-size, 14px);
1683
+ --adyen-internal-text-body-font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1684
+ --adyen-internal-text-body-line-height: var(--adyen-sdk-text-body-line-height, 20px);
1685
+ --adyen-internal-text-body-letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
1686
+ --adyen-internal-text-body-wide-line-height: var(--adyen-sdk-text-body-wide-line-height, 24px);
1687
+ --adyen-internal-text-body-stronger-font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
1688
+ --adyen-internal-text-body-stronger-wide-font-weight: var(--adyen-sdk-text-body-stronger-wide-font-weight, 500);
1689
+ --adyen-internal-text-body-stronger-wide-line-height: var(--adyen-sdk-text-body-stronger-wide-line-height, 24px);
1690
+ --adyen-internal-text-body-strongest-font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
1691
+ --adyen-internal-text-body-strongest-wide-font-weight: var(--adyen-sdk-text-body-strongest-wide-font-weight, 600);
1692
+ --adyen-internal-text-body-strongest-wide-line-height: var(--adyen-sdk-text-body-strongest-wide-line-height, 24px);
1693
+ --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1694
+ --adyen-internal-text-subtitle-font-size: var(--adyen-sdk-text-subtitle-font-size, 16px);
1695
+ --adyen-internal-text-subtitle-font-weight: var(--adyen-sdk-text-subtitle-font-weight, 500);
1696
+ --adyen-internal-text-subtitle-line-height: var(--adyen-sdk-text-subtitle-line-height, 26px);
1697
+ --adyen-internal-text-subtitle-letter-spacing: var(--adyen-sdk-text-subtitle-letter-spacing, 0);
1698
+ --adyen-internal-text-subtitle-stronger-font-weight: var(--adyen-sdk-text-subtitle-stronger-font-weight, 600);
1699
+ --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1700
+ --adyen-internal-text-title-font-family-secondary: var(--adyen-sdk-text-title-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1701
+ --adyen-internal-text-title-font-size: var(--adyen-sdk-text-title-font-size, 16px);
1702
+ --adyen-internal-text-title-font-weight: var(--adyen-sdk-text-title-font-weight, 600);
1703
+ --adyen-internal-text-title-line-height: var(--adyen-sdk-text-title-line-height, 26px);
1704
+ --adyen-internal-text-title-letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
1705
+ --adyen-internal-text-title-mobile-font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
1706
+ --adyen-internal-text-title-mobile-line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
1707
+ --adyen-internal-text-title-m-font-family: var(--adyen-sdk-text-title-m-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1708
+ --adyen-internal-text-title-m-font-family-secondary: var(--adyen-sdk-text-title-m-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1709
+ --adyen-internal-text-title-m-font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
1710
+ --adyen-internal-text-title-m-font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
1711
+ --adyen-internal-text-title-m-line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
1712
+ --adyen-internal-text-title-m-letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
1713
+ --adyen-internal-text-title-m-mobile-font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
1714
+ --adyen-internal-text-title-m-mobile-line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
1715
+ --adyen-internal-text-title-l-font-family: var(--adyen-sdk-text-title-l-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1716
+ --adyen-internal-text-title-l-font-family-secondary: var(--adyen-sdk-text-title-l-font-family-secondary, 'Adyen Mono', 'Roboto Mono', 'Oxygen Mono', 'IBM Plex Mono', 'Courier New', monospace);
1717
+ --adyen-internal-text-title-l-font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
1718
+ --adyen-internal-text-title-l-font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
1719
+ --adyen-internal-text-title-l-line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
1720
+ --adyen-internal-text-title-l-letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
1721
+ --adyen-internal-text-title-l-mobile-font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
1722
+ --adyen-internal-text-title-l-mobile-line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
1723
+ --adyen-internal-focus-ring-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
1724
+ --adyen-internal-focus-ring-spacer: var(--adyen-sdk-focus-ring-spacer, 1px);
1725
+ --adyen-internal-focus-ring-outline: var(--adyen-sdk-focus-ring-outline, 3px);
1726
+ --adyen-internal-spacer-100: var(--adyen-sdk-spacer-100, 32px);
1727
+ --adyen-internal-spacer-110: var(--adyen-sdk-spacer-110, 40px);
1728
+ --adyen-internal-spacer-120: var(--adyen-sdk-spacer-120, 48px);
1729
+ --adyen-internal-spacer-130: var(--adyen-sdk-spacer-130, 56px);
1730
+ --adyen-internal-spacer-140: var(--adyen-sdk-spacer-140, 64px);
1731
+ --adyen-internal-spacer-000: var(--adyen-sdk-spacer-000, 0px);
1732
+ --adyen-internal-spacer-010: var(--adyen-sdk-spacer-010, 2px);
1733
+ --adyen-internal-spacer-020: var(--adyen-sdk-spacer-020, 4px);
1734
+ --adyen-internal-spacer-030: var(--adyen-sdk-spacer-030, 6px);
1735
+ --adyen-internal-spacer-040: var(--adyen-sdk-spacer-040, 8px);
1736
+ --adyen-internal-spacer-050: var(--adyen-sdk-spacer-050, 10px);
1737
+ --adyen-internal-spacer-060: var(--adyen-sdk-spacer-060, 12px);
1738
+ --adyen-internal-spacer-070: var(--adyen-sdk-spacer-070, 16px);
1739
+ --adyen-internal-spacer-080: var(--adyen-sdk-spacer-080, 20px);
1740
+ --adyen-internal-spacer-090: var(--adyen-sdk-spacer-090, 24px);
1741
+ --adyen-internal-media-query-xs-min: var(--adyen-sdk-media-query-xs-min, 0px);
1742
+ --adyen-internal-media-query-xs-max: var(--adyen-sdk-media-query-xs-max, 375px);
1743
+ --adyen-internal-media-query-s-min: var(--adyen-sdk-media-query-s-min, 376px);
1744
+ --adyen-internal-media-query-s-max: var(--adyen-sdk-media-query-s-max, 499px);
1745
+ --adyen-internal-media-query-m-min: var(--adyen-sdk-media-query-m-min, 500px);
1746
+ --adyen-internal-media-query-m-max: var(--adyen-sdk-media-query-m-max, 767px);
1747
+ --adyen-internal-media-query-l-min: var(--adyen-sdk-media-query-l-min, 768px);
1748
+ --adyen-internal-media-query-l-max: var(--adyen-sdk-media-query-l-max, 1279px);
1749
+ --adyen-internal-media-query-xl-min: var(--adyen-sdk-media-query-xl-min, 1280px);
1750
+ --adyen-internal-media-query-xl-max: var(--adyen-sdk-media-query-xl-max, 1535px);
1751
+ --adyen-internal-media-query-xxl: var(--adyen-sdk-media-query-xxl, 1536px);
1752
+ --adyen-internal-shadow-low: var(--adyen-sdk-shadow-low, 0px 2px 4px rgba(0, 18, 34, 0.04), 0px 1px 2px rgba(0, 18, 34, 0.02));
1753
+ --adyen-internal-shadow-medium: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04));
1754
+ --adyen-internal-shadow-high: var(--adyen-sdk-shadow-high, 0px 18px 36px rgba(0, 18, 34, 0.12), 0px 4px 8px rgba(0, 18, 34, 0.06));
1755
+ --adyen-internal-shadow-low-border: var(--adyen-sdk-shadow-low-border, 0px 2px 4px rgba(0, 18, 34, 0.04), 0px 1px 2px rgba(0, 18, 34, 0.02), 0px 0px 0px 1px rgba(218, 221, 223, 1));
1756
+ --adyen-internal-shadow-medium-border: var(--adyen-sdk-shadow-medium-border, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04), 0px 0px 0px 1px rgba(218, 221, 223, 1));
1757
+ --adyen-internal-shadow-high-border: var(--adyen-sdk-shadow-high-border, 0px 18px 36px rgba(0, 18, 34, 0.12), 0px 4px 8px rgba(0, 18, 34, 0.06), 0px 0px 0px 1px rgba(218, 221, 223, 1));
1758
+ --adyen-internal-border-radius-xs: var(--adyen-sdk-border-radius-xs, 2px);
1759
+ --adyen-internal-border-radius-s: var(--adyen-sdk-border-radius-s, 4px);
1760
+ --adyen-internal-border-radius-m: var(--adyen-sdk-border-radius-m, 8px);
1761
+ --adyen-internal-border-radius-l: var(--adyen-sdk-border-radius-l, 12px);
1762
+ --adyen-internal-border-radius-xl: var(--adyen-sdk-border-radius-xl, 24px);
1763
+ --adyen-internal-border-width-s: var(--adyen-sdk-border-width-s, 1px);
1764
+ --adyen-internal-border-width-m: var(--adyen-sdk-border-width-m, 2px);
1765
+ --adyen-internal-border-width-l: var(--adyen-sdk-border-width-l, 3px);
1766
+ --adyen-internal-border-width-attention: var(--adyen-sdk-border-width-attention, 1.5px);
1767
+ --adyen-internal-z-index-global-screen: var(--adyen-sdk-z-index-global-screen, auto);
1768
+ --adyen-internal-z-index-global-elevated: var(--adyen-sdk-z-index-global-elevated, 5);
1769
+ --adyen-internal-z-index-global-navigation: var(--adyen-sdk-z-index-global-navigation, 10);
1770
+ --adyen-internal-z-index-global-instant-interaction: var(--adyen-sdk-z-index-global-instant-interaction, 15);
1771
+ --adyen-internal-z-index-local-tier-1: var(--adyen-sdk-z-index-local-tier-1, 1);
1772
+ --adyen-internal-z-index-local-tier-2: var(--adyen-sdk-z-index-local-tier-2, 2);
1773
+ --adyen-internal-z-index-local-tier-3: var(--adyen-sdk-z-index-local-tier-3, 3);
1774
+ --adyen-internal-z-index-local-tier-4: var(--adyen-sdk-z-index-local-tier-4, 4);
1775
+ /** Setting font-family by default to inherit, unless specified otherwise */
1776
+ --adyen-internal-text-rich-text-code-font-family: var(
1777
+ --adyen-sdk-text-rich-text-code-font-family,
1778
+ inherit
1779
+ );
1780
+ --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, inherit);
1781
+ --adyen-internal-text-caption-font-family-secondary: var(
1782
+ --adyen-sdk-text-caption-font-family-secondary,
1783
+ inherit
1784
+ );
1785
+ --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, inherit);
1786
+ --adyen-internal-text-body-font-family-secondary: var(
1787
+ --adyen-sdk-text-body-font-family-secondary,
1788
+ inherit
1789
+ );
1790
+ --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, inherit);
1791
+ --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, inherit);
1792
+ --adyen-internal-text-title-font-family-secondary: var(
1793
+ --adyen-sdk-text-title-font-family-secondary,
1794
+ inherit
1795
+ );
1796
+ --adyen-internal-text-title-m-font-family: var(--adyen-sdk-text-title-m-font-family, inherit);
1797
+ --adyen-internal-text-title-m-font-family-secondary: var(
1798
+ --adyen-sdk-text-title-m-font-family-secondary,
1799
+ inherit
1800
+ );
1801
+ --adyen-internal-text-title-l-font-family: var(--adyen-sdk-text-title-l-font-family, inherit);
1802
+ --adyen-internal-text-title-l-font-family-secondary: var(
1803
+ --adyen-sdk-text-title-l-font-family-secondary,
1804
+ inherit
1805
+ );
1806
+ --adyen-internal-tap-target: 44px;
1807
+ --adyen-internal-border-default-s: var(--adyen-internal-border-width-s) solid
1808
+ var(--adyen-internal-color-outline-primary);
1809
+ --adyen-internal-border-default-m: var(--adyen-internal-border-width-m) solid
1810
+ var(--adyen-internal-color-outline-primary);
1811
+ --adyen-internal-border-default-l: var(--adyen-internal-border-width-l) solid
1812
+ var(--adyen-internal-color-outline-primary);
1859
1813
  }
1860
1814
 
1861
- .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--minimal.adyen-kyc-dropdown-list--active {
1862
- width: 200px;
1815
+ .adyen-kyc-u-screen-reader-only {
1816
+ border: 0;
1817
+ clip: rect(0, 0, 0, 0);
1818
+ height: 1px;
1819
+ overflow: hidden;
1820
+ padding: 0 !important;
1821
+ position: absolute;
1822
+ white-space: nowrap;
1823
+ width: 1px;
1863
1824
  }
1864
1825
 
1865
- .adyen-kyc-dropdown-element {
1866
- border: var(--adyen-internal-border-width-s, 1px) solid transparent;
1867
- color: var(--adyen-internal-color-label-primary, #001222);
1868
- cursor: pointer;
1869
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
1870
- font-family: var(--adyen-internal-text-caption-font-family);
1871
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
1872
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
1873
- hyphens: auto;
1874
- outline: 0;
1875
- padding: var(--adyen-internal-spacer-040, 8px);
1876
- transition: background 0.2s ease-out, border-color 0.2s ease-out;
1877
- user-select: none;
1878
- word-break: break-word;
1879
- }
1880
- .adyen-kyc-dropdown-element.adyen-kyc-dropdown-search-element {
1881
- align-items: baseline;
1826
+ fieldset {
1827
+ border: none;
1828
+ padding: 0;
1829
+ margin: 0;
1830
+ }/* for container queries */
1831
+ .adyen-kyc-dropin {
1832
+ background: var(--adyen-internal-color-background-primary, #ffffff);
1882
1833
  display: flex;
1883
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1834
+ flex-direction: column;
1835
+ height: 100%;
1836
+ overflow: hidden;
1837
+ position: relative;
1838
+ width: 100%;
1839
+ }
1840
+ .adyen-kyc-dropin-container {
1841
+ position: relative;
1842
+ min-height: 480px;
1843
+ transform: scale(1);
1884
1844
  width: 100%;
1885
1845
  }
1886
1846
 
1887
- .adyen-kyc-dropdown-search-element__description {
1847
+ .adyen-kyc-dropin__content {
1848
+ display: flex;
1888
1849
  flex: 1;
1850
+ flex-direction: column;
1851
+ height: calc(100% - 56px);
1852
+ overflow: auto;
1889
1853
  }
1890
- .adyen-kyc-dropdown-search-element__description--highlight {
1891
- font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);
1892
- }
1893
- .adyen-kyc-dropdown-search-element__addresses {
1894
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1895
- display: flex;
1854
+ @container main (min-width: 680px) and (max-width: 1024px) {
1855
+ .adyen-kyc-dropin__content {
1856
+ height: calc(100% - 72px);
1857
+ }
1896
1858
  }
1897
- .adyen-kyc-dropdown-search-element__addresses--icon {
1898
- align-items: center;
1899
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1859
+
1860
+ /* padding in dropins, not used in modal view */
1861
+ .adyen-kyc-dropin__content-main {
1900
1862
  display: flex;
1901
- margin-left: var(--adyen-internal-spacer-040, 8px);
1863
+ flex: 1;
1864
+ padding: var(--adyen-internal-spacer-070, 16px);
1865
+ width: 100%;
1866
+ box-sizing: border-box;
1902
1867
  }
1903
- .adyen-kyc-dropdown-search-element__addresses--text {
1904
- display: none;
1905
- margin-left: var(--adyen-internal-spacer-020, 4px);
1868
+ @container main (min-width: 680px) and (max-width: 1024px) {
1869
+ .adyen-kyc-dropin__content-main {
1870
+ padding: var(--adyen-internal-spacer-090, 24px);
1871
+ }
1906
1872
  }
1907
1873
  @container main (min-width: 1024px) {
1908
- .adyen-kyc-dropdown-search-element__addresses--text {
1909
- display: block;
1874
+ .adyen-kyc-dropin__content-main {
1875
+ padding: var(--adyen-internal-spacer-110, 40px);
1910
1876
  }
1911
1877
  }
1912
1878
 
1913
- .adyen-kyc-dropdown-element:last-child {
1914
- border-bottom: 0;
1915
- }
1916
-
1917
- .adyen-kyc-dropdown-element:hover,
1918
- .adyen-kyc-dropdown-element:focus,
1919
- .adyen-kyc-dropdown-element:active {
1920
- background: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
1921
- }
1922
-
1923
- .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element--active {
1924
- background: var(--adyen-internal-color-background-primary-active, #ecedef);
1925
- }
1926
-
1927
- .adyen-kyc-dropdown-element--disabled {
1928
- cursor: not-allowed;
1929
- opacity: 0.4;
1930
- }
1931
-
1932
- .adyen-kyc-dropdown-element__icon svg {
1933
- border-radius: var(--adyen-internal-border-radius-s, 4px);
1934
- margin-right: var(--adyen-internal-spacer-040, 8px);
1935
- height: 26px;
1936
- max-width: 40px;
1879
+ .adyen-kyc-dropin__main {
1880
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
1881
+ width: 100%;
1882
+ }.adyen-kyc-card {
1883
+ all: unset;
1884
+ display: block;
1885
+ width: 100%;
1886
+ box-sizing: border-box;
1887
+ border-radius: var(--adyen-internal-border-radius-l);
1888
+ transition: 200ms;
1889
+ border: 1px solid transparent;
1890
+ overflow: hidden;
1937
1891
  }
1938
1892
 
1939
- .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element-description {
1940
- align-items: baseline;
1941
- flex-direction: column;
1942
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1893
+ .adyen-kyc-card-primary {
1894
+ background-color: var(--adyen-internal-color-background-primary);
1895
+ border-color: var(--adyen-internal-color-outline-primary);
1943
1896
  }
1944
1897
 
1945
- .adyen-kyc-dropdown + .adyen-kyc-input__inline-validation {
1946
- right: 32px;
1947
- }.adyen-kyc-dropdown {
1948
- position: relative;
1898
+ .adyen-kyc-card-secondary {
1899
+ background-color: var(--adyen-internal-color-background-secondary);
1949
1900
  }
1950
1901
 
1951
- .adyen-kyc-dropdown-list {
1952
- background: var(--adyen-internal-color-background-primary, #ffffff);
1953
- display: none;
1954
- list-style: none;
1955
- margin: var(--adyen-internal-spacer-000, 0px);
1956
- margin-bottom: var(--adyen-internal-spacer-120, 48px);
1957
- overflow-y: auto;
1958
- padding: var(--adyen-internal-spacer-000, 0px);
1959
- position: absolute;
1960
- width: 100%;
1961
- z-index: 2;
1962
- }
1963
- .adyen-kyc-dropdown-list__transformer {
1964
- position: relative;
1965
- padding: 0 !important;
1966
- margin: 0 !important;
1967
- }
1968
- .adyen-kyc-dropdown-list:focus {
1969
- outline: none;
1902
+ .adyen-kyc-card-padding-small {
1903
+ padding: var(--adyen-internal-spacer-040);
1970
1904
  }
1971
1905
 
1972
- .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
1973
- display: block;
1906
+ .adyen-kyc-card-padding-medium {
1907
+ padding: var(--adyen-internal-spacer-070);
1974
1908
  }
1975
1909
 
1976
- .adyen-kyc-dropdown-element {
1977
- align-items: center;
1978
- display: flex;
1910
+ .adyen-kyc-card-padding-large {
1911
+ padding: var(--adyen-internal-spacer-090);
1979
1912
  }
1980
1913
 
1981
- .adyen-kyc-dropdown-ignore-pointer-events {
1982
- pointer-events: none;
1914
+ .adyen-kyc-card-elevation-low {
1915
+ box-shadow: var(--adyen-internal-shadow-low);
1983
1916
  }
1984
1917
 
1985
- .adyen-kyc-dropdown-handle-pointer-events {
1986
- pointer-events: auto;
1987
- }.adyen-kyc-select-input-wrapper {
1988
- align-items: center;
1989
- display: flex;
1990
- background: var(--adyen-internal-color-background-primary, #ffffff);
1991
- border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary, #8c959d);
1992
- border-radius: var(--adyen-internal-border-radius-m, 8px);
1993
- color: var(--adyen-internal-color-label-primary, #001222);
1994
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1995
- line-height: var(--adyen-internal-text-body-line-height, 20px);
1996
- min-height: 40px;
1997
- outline: 0;
1998
- padding: var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-090, 24px) var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-060, 12px);
1999
- text-decoration: none;
2000
- transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
2001
- user-select: none;
1918
+ .adyen-kyc-card-elevation-medium {
1919
+ box-shadow: var(--adyen-internal-shadow-low), var(--adyen-internal-shadow-medium);
2002
1920
  }
2003
1921
 
2004
- .adyen-kyc-select-input-wrapper:hover {
2005
- border-color: var(--adyen-internal-color-outline-tertiary-hover, #6c7782);
1922
+ .adyen-kyc-card-elevation-high {
1923
+ box-shadow: var(--adyen-internal-shadow-low), var(--adyen-internal-shadow-high);
2006
1924
  }
2007
1925
 
2008
- .adyen-kyc-select-input__icon svg {
2009
- border-radius: var(--adyen-internal-border-radius-s, 4px);
2010
- margin-right: var(--adyen-internal-spacer-040, 8px);
2011
- height: 26px;
2012
- max-width: 40px;
1926
+ .adyen-kyc-card-interactive {
1927
+ cursor: pointer;
1928
+ outline-offset: calc(1px + var(--adyen-internal-focus-ring-spacer));
1929
+ outline: var(--adyen-internal-focus-ring-outline) solid transparent;
2013
1930
  }
2014
1931
 
2015
- .adyen-kyc-select-input {
2016
- background-color: var(--adyen-internal-color-background-primary, #ffffff);
1932
+ .adyen-kyc-card-interactive:disabled {
1933
+ background-color: var(--adyen-internal-color-background-disabled);
1934
+ box-shadow: none;
1935
+ border-color: transparent;
1936
+ color: var(--adyen-internal-color-label-disabled);
1937
+ cursor: default;
2017
1938
  }
2018
1939
 
2019
- .adyen-kyc-select-input--active,
2020
- .adyen-kyc-select-input--active:hover,
2021
- .adyen-kyc-select-input-wrapper:active,
2022
- .adyen-kyc-select-input-wrapper:focus {
2023
- border-color: var(--adyen-internal-color-outline-tertiary-active, #001222);
2024
- outline: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary-active, #001222);
2025
- }
1940
+ @media (hover: hover) {
1941
+ .adyen-kyc-card-interactive.adyen-kyc-card-primary:hover:not(.adyen-kyc-card-interactive:disabled) {
1942
+ background-color: var(--adyen-internal-color-background-primary-hover);
1943
+ }
2026
1944
 
2027
- .adyen-kyc-select-input-wrapper.adyen-kyc-select-input--readonly {
2028
- background-color: var(--adyen-internal-color-background-disabled, #ecedef);
2029
- color: var(--adyen-internal-color-label-disabled, #8c959d);
2030
- cursor: not-allowed;
2031
- pointer-events: none;
2032
- border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-disabled, #dadddf);
1945
+ .adyen-kyc-card-interactive.adyen-kyc-card-secondary:hover:not(.adyen-kyc-card-interactive:disabled) {
1946
+ background-color: var(--adyen-internal-color-background-secondary-hover);
1947
+ }
2033
1948
  }
2034
1949
 
2035
- .adyen-kyc-select-input.adyen-kyc-select-input--readonly {
2036
- background-color: var(--adyen-internal-color-background-disabled, #ecedef);
2037
- color: var(--adyen-internal-color-label-disabled, #8c959d);
2038
- cursor: not-allowed;
2039
- pointer-events: none;
1950
+ .adyen-kyc-card-interactive:focus-visible {
1951
+ outline-color: var(--adyen-internal-focus-ring-color);
2040
1952
  }
2041
1953
 
2042
- .adyen-kyc-select-input--readonly::after {
2043
- background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19471 6.5646C3.59429 7.09797 4.39396 7.0986 4.79439 6.56587L7.78716 2.58424C8.28257 1.92514 7.81232 0.983398 6.98779 0.983398L1.01209 0.983398C0.188292 0.983398 -0.282154 1.92367 0.211778 2.58298L3.19471 6.5646Z' fill='%23B9C4C9'/%3E%3C/svg%3E%0A");
1954
+ .adyen-kyc-card-interactive.adyen-kyc-card-primary:active:not(.adyen-kyc-card-interactive:disabled) {
1955
+ background-color: var(--adyen-internal-color-background-primary-active);
2044
1956
  }
2045
1957
 
2046
- .adyen-kyc-select-input--invalid {
2047
- border-color: var(--adyen-internal-color-outline-critical, #dc3801);
1958
+ .adyen-kyc-card-interactive.adyen-kyc-card-secondary:active:not(.adyen-kyc-card-interactive:disabled) {
1959
+ background-color: var(--adyen-internal-color-background-secondary-active);
2048
1960
  }
2049
1961
 
2050
- .adyen-kyc-select-input--minimal {
2051
- min-height: unset;
2052
- height: 100%;
2053
- background: var(--adyen-internal-color-background-secondary, #f4f5f6);
2054
- border: none;
2055
- border-radius: var(--adyen-internal-border-radius-s, 4px);
1962
+ .adyen-kyc-card-interactive.adyen-kyc-card-selected {
1963
+ pointer-events: none;
2056
1964
  }
2057
1965
 
2058
- .adyen-kyc-select-input-search {
2059
- align-items: center;
2060
- display: flex;
2061
- width: 100%;
1966
+ .adyen-kyc-card-selected {
1967
+ outline-offset: -1px;
1968
+ outline: 2px solid var(--adyen-internal-color-outline-primary-active);
2062
1969
  }
2063
- .adyen-kyc-select-input-search__icon {
2064
- color: var(--adyen-internal-color-label-tertiary, #8c959d);
2065
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
2066
- font-family: var(--adyen-internal-text-caption-font-family);
2067
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2068
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
2069
- padding-right: var(--adyen-internal-spacer-040, 8px);
1970
+ .adyen-kyc-checkbox__label {
1971
+ color: var(--adyen-internal-color-label-primary, #001222);
1972
+ cursor: pointer;
1973
+ display: inline-block;
1974
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
1975
+ font-weight: var(--adyen-internal-text-body-font-weight, 400);
1976
+ line-height: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
1977
+ padding-left: var(--adyen-internal-spacer-090, 24px);
1978
+ position: relative;
1979
+ user-select: none;
1980
+ width: calc(100% - 32px); /* leaves space for the error icon */
2070
1981
  }
2071
- .adyen-kyc-select-input-search .adyen-kyc-select-input--filterable::placeholder {
2072
- color: var(--adyen-internal-color-label-tertiary, #8c959d);
1982
+ .adyen-kyc-checkbox__helper-text {
1983
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
1984
+ display: block;
1985
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
1986
+ padding-left: var(--adyen-internal-spacer-090, 24px);
2073
1987
  }
2074
1988
 
2075
- .adyen-kyc-select-input-search::after {
2076
- display: none;
1989
+ .adyen-kyc-checkbox__input {
1990
+ opacity: 0;
1991
+ pointer-events: none;
1992
+ position: absolute;
2077
1993
  }
2078
-
2079
- .adyen-kyc-select-input-wrapper--filterable {
2080
- cursor: text;
1994
+ .adyen-kyc-checkbox__input:focus-visible + .adyen-kyc-checkbox__label::after {
1995
+ box-shadow: 0 0 0 var(--adyen-internal-focus-ring-spacer, 1px) var(--adyen-internal-color-background-primary, #ffffff), 0 0 0 var(--adyen-internal-focus-ring-outline, 3px) var(--adyen-internal-focus-ring-color, rgba(15, 117, 220, 0.8));
1996
+ transition: var(--adyen-internal-animation-duration-fast, 100ms) var(--adyen-internal-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
1997
+ transition-property: box-shadow;
2081
1998
  }
2082
-
2083
- .adyen-kyc-select-input-wrapper--non-filterable {
2084
- cursor: pointer;
1999
+ .adyen-kyc-checkbox__input:hover + .adyen-kyc-checkbox__label::after {
2000
+ background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2085
2001
  }
2086
-
2087
- .adyen-kyc-select-input-wrapper::after {
2088
- background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19471 6.5646C3.59429 7.09797 4.39396 7.0986 4.79439 6.56587L7.78716 2.58424C8.28257 1.92514 7.81232 0.983398 6.98779 0.983398L1.01209 0.983398C0.188292 0.983398 -0.282154 1.92367 0.211778 2.58298L3.19471 6.5646Z' fill='%23687282'/%3E%3C/svg%3E%0A");
2089
- background-position: center;
2090
- background-repeat: no-repeat;
2002
+ .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::before {
2003
+ opacity: 1;
2004
+ }
2005
+ .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::after {
2006
+ background-color: var(--adyen-internal-color-background-inverse-primary, #001222);
2007
+ border-color: var(--adyen-internal-color-background-inverse-primary, #001222);
2008
+ }
2009
+ .adyen-kyc-checkbox__input:checked:hover + .adyen-kyc-checkbox__label::after {
2010
+ background-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
2011
+ border-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
2012
+ }
2013
+ .adyen-kyc-checkbox__input {
2014
+ /* Check */
2015
+ }
2016
+ .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::before {
2017
+ border-bottom: var(--adyen-internal-border-width-m, 2px) solid var(--adyen-internal-color-background-primary, #ffffff);
2018
+ border-right: var(--adyen-internal-border-width-m, 2px) solid var(--adyen-internal-color-background-primary, #ffffff);
2091
2019
  content: "";
2092
- height: 6px;
2020
+ height: 7px;
2021
+ left: 3px;
2022
+ opacity: 0;
2093
2023
  position: absolute;
2094
- right: 16px;
2095
- width: 8px;
2024
+ top: 4px;
2025
+ transform: rotateZ(37deg);
2026
+ transform-origin: 100% 100%;
2027
+ width: 5px;
2028
+ z-index: 1;
2029
+ }
2030
+ .adyen-kyc-checkbox__input {
2031
+ /* Box */
2032
+ }
2033
+ .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::after {
2034
+ background-color: var(--adyen-internal-color-background-primary, #ffffff);
2035
+ border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary, #8c959d);
2036
+ border-radius: var(--adyen-internal-border-radius-s, 4px);
2037
+ content: "";
2038
+ height: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
2039
+ left: 0;
2040
+ position: absolute;
2041
+ top: 0;
2042
+ width: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
2043
+ z-index: 0;
2044
+ }.adyen-kyc-field {
2045
+ display: block;
2046
+ margin-bottom: var(--adyen-internal-spacer-090, 24px);
2047
+ width: 100%;
2048
+ }
2049
+ .adyen-kyc-field--disabled {
2050
+ color: var(--adyen-internal-color-label-disabled, #8c959d);
2051
+ opacity: 0.5;
2052
+ pointer-events: none;
2096
2053
  }
2097
2054
 
2098
- .adyen-kyc-select-input--list-open::after {
2099
- transform: rotate(180deg);
2055
+ .adyen-kyc-optional-label {
2056
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2100
2057
  }
2101
2058
 
2102
- .adyen-kyc-select-input--filterable {
2103
- border: 0;
2104
- caret-color: var(--adyen-internal-color-label-highlight, #0f75dc);
2059
+ .adyen-kyc-label__text {
2105
2060
  color: var(--adyen-internal-color-label-primary, #001222);
2106
- font-family: inherit;
2061
+ display: block;
2107
2062
  font-size: var(--adyen-internal-text-body-font-size, 14px);
2108
- height: 100%;
2109
- padding: var(--adyen-internal-spacer-000, 0px);
2110
- width: 100%;
2063
+ font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);
2064
+ transition: color 0.1s ease-out;
2111
2065
  }
2112
- .adyen-kyc-select-input--filterable::placeholder {
2066
+
2067
+ .adyen-kyc-helper-text {
2113
2068
  color: var(--adyen-internal-color-label-secondary, #5c6874);
2114
- font-weight: var(--adyen-internal-text-body-font-weight, 400);
2069
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2070
+ font-family: var(--adyen-internal-text-caption-font-family);
2071
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2072
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2073
+ display: flex;
2074
+ align-items: center;
2115
2075
  }
2116
- .adyen-kyc-select-input--filterable:focus, .adyen-kyc-select-input--filterable:active {
2117
- outline: 0;
2076
+ .adyen-kyc-helper-text__above {
2077
+ margin-bottom: var(--adyen-internal-spacer-020, 4px);
2118
2078
  }
2119
-
2120
- .adyen-kyc-select-input--non-filterable {
2121
- all: unset;
2079
+ .adyen-kyc-helper-text__below {
2080
+ margin-top: var(--adyen-internal-spacer-020, 4px);
2122
2081
  }
2123
-
2124
- .adyen-kyc-select-input--placeholder {
2125
- color: var(--adyen-internal-color-label-secondary, #5c6874);
2126
- font-weight: var(--adyen-internal-text-body-font-weight, 400);
2082
+ .adyen-kyc-helper-text__valid-format-check {
2083
+ color: var(--adyen-internal-color-label-success, #008845);
2084
+ font-size: var(--adyen-internal-text-title-font-size, 16px);
2085
+ font-family: var(--adyen-internal-text-title-font-family);
2086
+ font-weight: var(--adyen-internal-text-title-font-weight, 600);
2087
+ line-height: var(--adyen-internal-text-title-line-height, 26px);
2088
+ display: inline-flex;
2127
2089
  }
2128
2090
 
2129
- .adyen-kyc-ignore-pointer-events {
2130
- pointer-events: none;
2091
+ .adyen-kyc-label__text--error {
2092
+ color: var(--adyen-internal-color-label-critical, #dc3801);
2131
2093
  }
2132
2094
 
2133
- .adyen-kyc-handle-pointer-events {
2134
- pointer-events: auto;
2135
- }.adyen-kyc-end-state-layout {
2095
+ .adyen-kyc-error-text {
2136
2096
  align-items: center;
2097
+ color: var(--adyen-internal-color-label-critical, #dc3801);
2137
2098
  display: flex;
2138
- flex-direction: column;
2139
- flex-grow: 1;
2140
- gap: var(--adyen-internal-spacer-100);
2141
- height: 100%;
2142
- justify-content: center;
2143
- margin-left: auto;
2144
- margin-right: auto;
2145
- max-width: 600px;
2146
- width: 100%;
2099
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2100
+ font-family: var(--adyen-internal-text-caption-font-family);
2101
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2102
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2103
+ margin-top: var(--adyen-internal-spacer-020, 4px);
2104
+ position: relative;
2147
2105
  }
2148
2106
 
2149
- .adyen-kyc-end-state-layout-header {
2107
+ .adyen-kyc-guidance-text {
2150
2108
  align-items: center;
2109
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2110
+ display: flex;
2111
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2112
+ font-family: var(--adyen-internal-text-caption-font-family);
2113
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2114
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2115
+ margin-top: var(--adyen-internal-spacer-020, 4px);
2116
+ position: relative;
2117
+ }
2118
+
2119
+ .adyen-kyc-upload-field__guidance {
2151
2120
  display: flex;
2152
2121
  flex-direction: column;
2153
- gap: var(--adyen-internal-spacer-040);
2154
- text-align: center;
2122
+ }
2123
+ .adyen-kyc-upload-field__subtitle {
2124
+ color: var(--adyen-internal-color-label-primary, #001222);
2125
+ margin: var(--adyen-internal-spacer-070, 16px) var(--adyen-internal-spacer-000, 0px);
2155
2126
  }
2156
2127
 
2157
- .adyen-kyc-end-state-layout-icon {
2158
- align-items: center;
2159
- border-radius: 50%;
2128
+ .adyen-kyc-input-wrapper {
2129
+ display: block;
2130
+ position: relative;
2131
+ margin-top: var(--adyen-internal-spacer-040, 8px);
2132
+ }
2133
+ .adyen-kyc-input-wrapper--block {
2134
+ display: block;
2135
+ }.adyen-kyc-loader-wrapper-loader {
2136
+ display: none;
2137
+ height: 100%;
2138
+ left: 0;
2139
+ position: absolute;
2140
+ top: 0;
2141
+ width: 100%;
2142
+ z-index: 1;
2143
+ }
2144
+
2145
+ .adyen-kyc-loader-wrapper-loader-active {
2146
+ display: block;
2147
+ }
2148
+ /* for container queries */
2149
+ .adyen-kyc-modal {
2150
+ background-color: var(--adyen-internal-color-background-modal);
2151
+ border: var(--adyen-internal-spacer-000);
2152
+ box-shadow: var(--adyen-internal-shadow-high);
2160
2153
  display: flex;
2161
- height: 64px;
2162
- justify-content: center;
2163
- width: 64px;
2154
+ flex-direction: column;
2155
+ height: 100vh;
2156
+ height: 100dvh;
2157
+ max-height: unset;
2158
+ max-width: unset;
2159
+ overflow: hidden;
2160
+ padding: var(--adyen-internal-spacer-000);
2161
+ position: fixed;
2162
+ width: 100vw;
2163
+ width: 100dvw;
2164
2164
  }
2165
-
2166
- .adyen-kyc-end-state-layout-icon svg {
2167
- height: 24px;
2168
- width: 24px;
2165
+ .adyen-kyc-modal:focus-visible {
2166
+ outline: none;
2169
2167
  }
2170
-
2171
- .adyen-kyc-end-state-layout-icon-success {
2172
- background-color: var(--adyen-internal-color-decorative-green);
2173
- box-shadow: var(--adyen-internal-shadow-medium);
2174
- color: var(--adyen-internal-color-label-on-color);
2168
+ @media (min-width: 480px) {
2169
+ .adyen-kyc-modal {
2170
+ transition: max-height 400ms, max-width 400ms;
2171
+ }
2175
2172
  }
2176
2173
 
2177
- .adyen-kyc-end-state-layout-icon-error {
2178
- background-color: var(--adyen-internal-color-background-critical-strong);
2179
- box-shadow: var(--adyen-internal-shadow-medium);
2180
- color: var(--adyen-internal-color-label-on-color);
2174
+ .adyen-kyc-modal-small {
2175
+ border-radius: var(--adyen-internal-border-radius-l);
2176
+ max-height: 80vh;
2177
+ max-width: 400px;
2178
+ width: 80vw;
2179
+ height: fit-content;
2181
2180
  }
2182
2181
 
2183
- .adyen-kyc-end-state-layout-icon-info {
2184
- background-color: var(--adyen-internal-color-background-highlight-weak);
2185
- color: var(--adyen-internal-color-label-highlight);
2182
+ @media (min-width: 480px) {
2183
+ .adyen-kyc-modal-medium {
2184
+ border-radius: var(--adyen-internal-border-radius-l);
2185
+ height: 90vh;
2186
+ max-height: 600px;
2187
+ max-width: 600px;
2188
+ width: 90vw;
2189
+ }
2186
2190
  }
2187
2191
 
2188
- .adyen-kyc-end-state-layout-icon-warning {
2189
- background-color: var(--adyen-internal-color-decorative-yellow);
2190
- color: var(--adyen-internal-color-label-primary);
2192
+ @media (min-width: 480px) {
2193
+ .adyen-kyc-modal-large {
2194
+ border-radius: var(--adyen-internal-border-radius-l);
2195
+ height: 90vh;
2196
+ max-height: 900px;
2197
+ max-width: 900px;
2198
+ width: 90vw;
2199
+ }
2191
2200
  }
2192
2201
 
2193
- .adyen-kyc-end-state-layout-text {
2194
- align-items: center;
2202
+ .adyen-kyc-modal-body {
2195
2203
  display: flex;
2196
2204
  flex-direction: column;
2197
- gap: var(--adyen-internal-spacer-040);
2198
- text-align: center;
2205
+ overflow-y: auto;
2206
+ scrollbar-width: thin;
2199
2207
  }
2200
2208
 
2201
- .adyen-kyc-end-state-layout-title {
2202
- color: var(--adyen-internal-color-label-primary);
2203
- font-size: var(--adyen-internal-text-title-m-font-size);
2204
- font-weight: var(--adyen-internal-text-title-m-font-weight);
2205
- line-height: var(--adyen-internal-text-title-m-line-height);
2206
- margin: 0;
2209
+ .adyen-kyc-modal-body-height {
2210
+ height: 100%;
2207
2211
  }
2208
2212
 
2209
- .adyen-kyc-end-state-layout-description {
2210
- color: var(--adyen-internal-color-label-secondary);
2211
- font-size: var(--adyen-internal-text-body-font-size);
2212
- font-weight: var(--adyen-internal-text-body-font-weight);
2213
- line-height: var(--adyen-internal-text-body-line-height);
2213
+ .adyen-kyc-modal-accessable-title {
2214
+ display: none;
2214
2215
  }
2215
2216
 
2216
- .adyen-kyc-end-state-layout-action {
2217
- display: flex;
2218
- flex-direction: column;
2219
- gap: var(--adyen-internal-spacer-040);
2220
- max-width: 320px;
2221
- width: 100%;
2222
- }
2223
- .adyen-kyc-accordion,
2224
- .adyen-kyc-accordion-summary {
2225
- color: var(--adyen-internal-color-label-primary);
2226
- font-size: var(--adyen-internal-text-body-font-size);
2227
- font-family: var(--adyen-internal-text-body-font-family);
2228
- line-height: var(--adyen-internal-text-body-line-height);
2229
- cursor: pointer;
2217
+ .adyen-kyc-modal-transition-slide-in {
2218
+ animation-name: adyen-kyc-slide-in;
2219
+ animation-duration: 400ms;
2220
+ animation-timing-function: ease-out;
2230
2221
  }
2231
2222
 
2232
- .adyen-kyc-accordion {
2233
- background: none;
2234
- border-radius: var(--adyen-internal-border-radius-l);
2235
- margin-bottom: var(--adyen-internal-spacer-050);
2223
+ .adyen-kyc-modal-transition-drop-in {
2224
+ animation-name: adyen-kyc-drop-in;
2225
+ animation-duration: 250ms;
2226
+ animation-timing-function: ease;
2236
2227
  }
2237
2228
 
2238
- .adyen-kyc-accordion-basic {
2239
- background-color: var(--adyen-internal-color-background-secondary);
2229
+ .adyen-kyc-modal-inset {
2230
+ padding: var(--adyen-internal-spacer-140) var(--adyen-internal-spacer-070);
2240
2231
  }
2241
- .adyen-kyc-accordion-info {
2242
- background-color: var(--adyen-internal-color-background-highlight-weak);
2232
+ @media (min-width: 480px) {
2233
+ .adyen-kyc-modal-inset {
2234
+ padding-left: var(--adyen-internal-spacer-100);
2235
+ padding-right: var(--adyen-internal-spacer-100);
2236
+ }
2243
2237
  }
2244
- .adyen-kyc-accordion-error {
2245
- background-color: var(--adyen-internal-color-background-critical-weak);
2238
+ @media (min-width: 680px) {
2239
+ .adyen-kyc-modal-inset {
2240
+ padding-left: calc(var(--adyen-internal-spacer-070) * 2 + var(--adyen-internal-tap-target));
2241
+ padding-right: calc(var(--adyen-internal-spacer-070) * 2 + var(--adyen-internal-tap-target));
2242
+ }
2246
2243
  }
2247
- .adyen-kyc-accordion-warning {
2248
- background-color: var(--adyen-internal-color-background-warning-weak);
2244
+
2245
+ .adyen-kyc-modal::backdrop {
2246
+ animation-name: adyen-kyc-backdrop-dissolve;
2247
+ animation-duration: 400ms;
2248
+ animation-timing-function: ease;
2249
+ background-color: var(--adyen-internal-color-support-overlay);
2250
+ opacity: 0.5;
2251
+ backdrop-filter: blur(10px);
2249
2252
  }
2250
- .adyen-kyc-accordion-success {
2251
- background-color: var(--adyen-internal-color-background-success-weak);
2253
+
2254
+ .adyen-kyc-modal-button {
2255
+ position: absolute;
2256
+ top: var(--adyen-internal-spacer-070);
2257
+ right: var(--adyen-internal-spacer-070);
2258
+ z-index: 10;
2252
2259
  }
2253
- .adyen-kyc-accordion-narrow .adyen-kyc-accordion-summary {
2254
- padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-070);
2260
+
2261
+ @keyframes adyen-kyc-backdrop-dissolve {
2262
+ 0% {
2263
+ opacity: 0;
2264
+ }
2265
+ 100% {
2266
+ opacity: 0.5;
2267
+ backdrop-filter: blur(10px);
2268
+ }
2255
2269
  }
2256
- .adyen-kyc-accordion-narrow .adyen-kyc-accordion-content {
2257
- padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-070)
2258
- var(--adyen-internal-spacer-060);
2270
+ @keyframes adyen-kyc-slide-in {
2271
+ 0% {
2272
+ opacity: 0;
2273
+ top: 64px;
2274
+ }
2275
+ 100% {
2276
+ opacity: 1;
2277
+ top: 0;
2278
+ }
2259
2279
  }
2260
- .adyen-kyc-accordion-with-icon .adyen-kyc-accordion-content {
2261
- margin-left: var(--adyen-internal-spacer-080);
2280
+ @keyframes adyen-kyc-drop-in {
2281
+ 0% {
2282
+ opacity: 0;
2283
+ transform: scale(1.2);
2284
+ }
2285
+ 100% {
2286
+ opacity: 1;
2287
+ transform: scale(1);
2288
+ }
2262
2289
  }
2263
-
2264
- .adyen-kyc-accordion-summary {
2265
- display: flex;
2290
+ .adyen-kyc-modal-header {
2266
2291
  align-items: center;
2267
- gap: var(--adyen-internal-spacer-050);
2268
- padding: var(--adyen-internal-spacer-080);
2292
+ display: flex;
2293
+ font-size: var(--adyen-internal-text-title-font-size);
2269
2294
  font-weight: var(--adyen-internal-text-title-font-weight);
2270
- transition: margin 150ms ease-out;
2271
- margin-bottom: var(--adyen-internal-spacer-000);
2272
- border-radius: var(--adyen-internal-border-radius-l);
2273
- }
2274
-
2275
- .adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow {
2276
- cursor: pointer;
2277
- user-select: none;
2278
- height: 1em;
2279
- }
2280
-
2281
- .adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow-right {
2282
- margin-left: auto;
2283
- margin-right: var(--adyen-internal-spacer-050);
2295
+ gap: var(--adyen-internal-spacer-040);
2296
+ justify-content: space-between;
2297
+ padding: var(--adyen-internal-spacer-070);
2284
2298
  }
2285
2299
 
2286
- .adyen-kyc-accordion[open] .adyen-kyc-accordion-arrow {
2287
- transform: rotate(-180deg);
2288
- }
2289
- .adyen-kyc-accordion summary::-webkit-details-marker {
2290
- display: none;
2300
+ .adyen-kyc-modal-content {
2301
+ flex-grow: 1;
2302
+ overflow-y: auto;
2303
+ padding: var(--adyen-internal-spacer-070);
2291
2304
  }
2292
2305
 
2293
- .adyen-kyc-accordion-content {
2294
- cursor: auto;
2295
- padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-080)
2296
- var(--adyen-internal-spacer-080);
2297
- user-select: none;
2306
+ .adyen-kyc-modal-footer {
2307
+ align-items: center;
2308
+ border-top: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-primary);
2298
2309
  display: flex;
2299
- flex-direction: column;
2300
2310
  gap: var(--adyen-internal-spacer-040);
2311
+ justify-content: flex-end;
2312
+ padding: var(--adyen-internal-spacer-070);
2313
+ }.adyen-kyc-progress-bar {
2314
+ --adyen-progress-bar-size: 4px;
2315
+ background-color: var(--adyen-internal-color-background-secondary);
2316
+ height: var(--adyen-progress-bar-size);
2317
+ overflow: hidden;
2301
2318
  }
2302
2319
 
2303
- .adyen-kyc-accordion[open] summary {
2304
- margin-bottom: var(--adyen-internal-spacer-020);
2305
- user-select: auto;
2320
+ .adyen-kyc-progress-bar-rounded {
2321
+ border-radius: calc(var(--adyen-progress-bar-size) / 2);
2306
2322
  }
2307
- .adyen-kyc-alert {
2308
- border-radius: var(--adyen-internal-border-radius-m);
2309
- padding: var(--adyen-internal-spacer-070);
2310
- word-break: break-word;
2311
- display: flex;
2312
- flex-direction: column;
2313
- gap: var(--adyen-internal-spacer-040);
2314
- text-align: left;
2323
+
2324
+ .adyen-kyc-progress-bar-indicator {
2325
+ background-color: var(--adyen-internal-color-background-inverse-primary);
2326
+ text-indent: -1000%;
2327
+ transition: width 400ms;
2328
+ overflow: hidden;
2315
2329
  }
2316
- .adyen-kyc-alert-without-icon .adyen-kyc-alert-explanation,
2317
- .adyen-kyc-alert-without-icon .adyen-kyc-alert-actions {
2318
- margin: 0 var(--adyen-internal-spacer-070);
2330
+ /* for container queries */
2331
+ .adyen-kyc-dropdown {
2332
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2333
+ max-width: 100%;
2334
+ width: 100%;
2319
2335
  }
2320
2336
 
2321
- .adyen-kyc-alert-basic {
2322
- background-color: var(--adyen-internal-color-background-secondary);
2337
+ .adyen-kyc-dropdown--minimal {
2338
+ max-width: 120px;
2323
2339
  }
2324
2340
 
2325
- .adyen-kyc-alert-info {
2326
- background-color: var(--adyen-internal-color-background-highlight-weak);
2341
+ .adyen-kyc-dropdown-list {
2342
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
2343
+ box-shadow: var(--adyen-internal-shadow-medium-border, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04), 0px 0px 0px 1px rgba(218, 221, 223, 1));
2344
+ z-index: 2;
2345
+ }
2346
+ .adyen-kyc-dropdown-list .adyen-kyc-checkbox__helper-text {
2347
+ cursor: pointer;
2327
2348
  }
2328
2349
 
2329
- .adyen-kyc-alert-error {
2330
- background-color: var(--adyen-internal-color-background-critical-weak);
2350
+ .adyen-kyc-dropdown-list--above {
2351
+ bottom: -6px;
2331
2352
  }
2332
2353
 
2333
- .adyen-kyc-alert-warning {
2334
- background-color: var(--adyen-internal-color-background-warning-weak);
2354
+ .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
2355
+ margin-top: var(--adyen-internal-spacer-010, 2px);
2335
2356
  }
2336
2357
 
2337
- .adyen-kyc-alert-success {
2338
- background-color: var(--adyen-internal-color-background-success-weak);
2358
+ .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--minimal.adyen-kyc-dropdown-list--active {
2359
+ width: 200px;
2339
2360
  }
2340
2361
 
2341
- .adyen-kyc-alert-header {
2342
- align-items: flex-start;
2362
+ .adyen-kyc-dropdown-element {
2363
+ border: var(--adyen-internal-border-width-s, 1px) solid transparent;
2364
+ color: var(--adyen-internal-color-label-primary, #001222);
2365
+ cursor: pointer;
2366
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2367
+ font-family: var(--adyen-internal-text-caption-font-family);
2368
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2369
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2370
+ hyphens: auto;
2371
+ outline: 0;
2372
+ padding: var(--adyen-internal-spacer-040, 8px);
2373
+ transition: background 0.2s ease-out, border-color 0.2s ease-out;
2374
+ user-select: none;
2375
+ word-break: break-word;
2376
+ }
2377
+ .adyen-kyc-dropdown-element.adyen-kyc-dropdown-search-element {
2378
+ align-items: baseline;
2343
2379
  display: flex;
2380
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2381
+ width: 100%;
2344
2382
  }
2345
2383
 
2346
- .adyen-kyc-alert-header-without-children {
2384
+ .adyen-kyc-dropdown-search-element__description {
2385
+ flex: 1;
2386
+ }
2387
+ .adyen-kyc-dropdown-search-element__description--highlight {
2388
+ font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);
2389
+ }
2390
+ .adyen-kyc-dropdown-search-element__addresses {
2391
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2392
+ display: flex;
2393
+ }
2394
+ .adyen-kyc-dropdown-search-element__addresses--icon {
2347
2395
  align-items: center;
2396
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2397
+ display: flex;
2398
+ margin-left: var(--adyen-internal-spacer-040, 8px);
2348
2399
  }
2349
-
2350
- .adyen-kyc-alert-icon {
2351
- line-height: var(--adyen-internal-text-body-line-height);
2352
- margin-top: var(--adyen-internal-spacer-010);
2400
+ .adyen-kyc-dropdown-search-element__addresses--text {
2401
+ display: none;
2402
+ margin-left: var(--adyen-internal-spacer-020, 4px);
2353
2403
  }
2354
- .adyen-kyc-alert-icon-info {
2355
- color: var(--adyen-internal-color-background-highlight-strong);
2404
+ @container main (min-width: 1024px) {
2405
+ .adyen-kyc-dropdown-search-element__addresses--text {
2406
+ display: block;
2407
+ }
2356
2408
  }
2357
2409
 
2358
- .adyen-kyc-alert-icon-error {
2359
- color: var(--adyen-internal-color-background-critical-strong);
2410
+ .adyen-kyc-dropdown-element:last-child {
2411
+ border-bottom: 0;
2360
2412
  }
2361
2413
 
2362
- .adyen-kyc-alert-icon-warning {
2363
- color: var(--adyen-internal-color-background-warning-strong);
2414
+ .adyen-kyc-dropdown-element:hover,
2415
+ .adyen-kyc-dropdown-element:focus,
2416
+ .adyen-kyc-dropdown-element:active {
2417
+ background: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2364
2418
  }
2365
2419
 
2366
- .adyen-kyc-alert-icon-success {
2367
- color: var(--adyen-internal-color-background-success-strong);
2420
+ .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element--active {
2421
+ background: var(--adyen-internal-color-background-primary-active, #ecedef);
2368
2422
  }
2369
2423
 
2370
- .adyen-kyc-alert-title {
2371
- flex-grow: 1;
2372
- margin-left: var(--adyen-internal-spacer-070);
2424
+ .adyen-kyc-dropdown-element--disabled {
2425
+ cursor: not-allowed;
2426
+ opacity: 0.4;
2373
2427
  }
2374
2428
 
2375
- .adyen-kyc-alert-explanation {
2376
- color: var(--adyen-internal-color-label-primary);
2377
- font-size: var(--adyen-internal-text-body-font-size);
2378
- margin: 0 var(--adyen-internal-spacer-100);
2429
+ .adyen-kyc-dropdown-element__icon svg {
2430
+ border-radius: var(--adyen-internal-border-radius-s, 4px);
2431
+ margin-right: var(--adyen-internal-spacer-040, 8px);
2432
+ height: 26px;
2433
+ max-width: 40px;
2379
2434
  }
2380
2435
 
2381
- .adyen-kyc-alert-actions {
2382
- display: flex;
2383
- gap: var(--adyen-internal-spacer-070);
2384
- text-align: left;
2436
+ .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element-description {
2437
+ align-items: baseline;
2438
+ flex-direction: column;
2439
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2385
2440
  }
2386
- /* for container queries */
2387
- .adyen-kyc-form-navigation {
2388
- width: 100%;
2441
+
2442
+ .adyen-kyc-dropdown + .adyen-kyc-input__inline-validation {
2443
+ right: 32px;
2444
+ }.adyen-kyc-dropdown {
2445
+ position: relative;
2389
2446
  }
2390
- @container main (max-width: 680px) {
2391
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
2392
- display: none;
2393
- }
2394
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
2395
- font-size: 0;
2396
- }
2397
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
2398
- font-size: var(--adyen-internal-text-title-font-size, 16px);
2399
- font-family: var(--adyen-internal-text-title-font-family);
2400
- font-weight: var(--adyen-internal-text-title-font-weight, 600);
2401
- line-height: var(--adyen-internal-text-title-line-height, 26px);
2402
- padding-left: var(--adyen-internal-spacer-000, 0px);
2403
- }
2447
+
2448
+ .adyen-kyc-dropdown-list {
2449
+ background: var(--adyen-internal-color-background-primary, #ffffff);
2450
+ display: none;
2451
+ list-style: none;
2452
+ margin: var(--adyen-internal-spacer-000, 0px);
2453
+ margin-bottom: var(--adyen-internal-spacer-120, 48px);
2454
+ overflow-y: auto;
2455
+ padding: var(--adyen-internal-spacer-000, 0px);
2456
+ position: absolute;
2457
+ width: 100%;
2458
+ z-index: 2;
2404
2459
  }
2405
- @container main (min-width: 680px) and (max-width: 1024px) {
2406
- .adyen-kyc-form-navigation {
2407
- padding-right: var(--adyen-internal-spacer-100, 32px);
2408
- }
2409
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
2410
- display: none;
2411
- }
2460
+ .adyen-kyc-dropdown-list__transformer {
2461
+ position: relative;
2462
+ padding: 0 !important;
2463
+ margin: 0 !important;
2412
2464
  }
2413
- @container main (max-width: 680px) {
2414
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
2415
- display: none;
2416
- }
2465
+ .adyen-kyc-dropdown-list:focus {
2466
+ outline: none;
2417
2467
  }
2418
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__items {
2419
- margin: var(--adyen-internal-spacer-040, 8px) 0 0 0;
2420
- padding: var(--adyen-internal-spacer-000, 0px);
2468
+
2469
+ .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
2470
+ display: block;
2421
2471
  }
2422
2472
 
2423
- .adyen-kyc-form-navigation__home-button-item {
2424
- align-items: center;
2425
- display: flex;
2426
- justify-content: space-between;
2427
- list-style-type: none;
2428
- margin-bottom: var(--adyen-internal-spacer-070, 16px);
2429
- }.adyen-kyc-form-navigation__item {
2473
+ .adyen-kyc-dropdown-element {
2430
2474
  align-items: center;
2431
- border-left: var(--adyen-internal-border-default-m);
2432
- color: var(--adyen-internal-color-label-primary, #001222);
2433
- cursor: default;
2434
2475
  display: flex;
2435
- padding: var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-040, 8px);
2436
2476
  }
2437
- .adyen-kyc-form-navigation__item button {
2477
+
2478
+ .adyen-kyc-dropdown-ignore-pointer-events {
2479
+ pointer-events: none;
2480
+ }
2481
+
2482
+ .adyen-kyc-dropdown-handle-pointer-events {
2483
+ pointer-events: auto;
2484
+ }.adyen-kyc-select-input-wrapper {
2485
+ align-items: center;
2438
2486
  display: flex;
2439
- background: none;
2440
- border: none;
2487
+ background: var(--adyen-internal-color-background-primary, #ffffff);
2488
+ border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary, #8c959d);
2489
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
2490
+ color: var(--adyen-internal-color-label-primary, #001222);
2441
2491
  font-size: var(--adyen-internal-text-body-font-size, 14px);
2442
2492
  line-height: var(--adyen-internal-text-body-line-height, 20px);
2443
- padding: var(--adyen-internal-spacer-000, 0px);
2444
- color: inherit;
2445
- text-align: left;
2446
- }
2447
- .adyen-kyc-form-navigation__item--active {
2448
- border-left: var(--adyen-internal-border-width-m, 2px) solid;
2449
- color: var(--adyen-internal-color-label-highlight, #0f75dc);
2493
+ min-height: 40px;
2494
+ outline: 0;
2495
+ padding: var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-090, 24px) var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-060, 12px);
2496
+ text-decoration: none;
2497
+ transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
2498
+ user-select: none;
2450
2499
  }
2451
- .adyen-kyc-form-navigation__item--isnav button {
2452
- cursor: pointer;
2500
+
2501
+ .adyen-kyc-select-input-wrapper:hover {
2502
+ border-color: var(--adyen-internal-color-outline-tertiary-hover, #6c7782);
2453
2503
  }
2454
2504
 
2455
- .adyen-kyc-form-navigation__item-icon {
2456
- display: flex;
2457
- margin-left: var(--adyen-internal-spacer-040, 8px);
2505
+ .adyen-kyc-select-input__icon svg {
2506
+ border-radius: var(--adyen-internal-border-radius-s, 4px);
2507
+ margin-right: var(--adyen-internal-spacer-040, 8px);
2508
+ height: 26px;
2509
+ max-width: 40px;
2458
2510
  }
2459
- .adyen-kyc-form-navigation__item-icon--success {
2460
- color: var(--adyen-internal-color-label-success, #008845);
2511
+
2512
+ .adyen-kyc-select-input {
2513
+ background-color: var(--adyen-internal-color-background-primary, #ffffff);
2461
2514
  }
2462
- .adyen-kyc-form-navigation__item-icon--error {
2463
- color: var(--adyen-internal-color-label-critical, #dc3801);
2464
- }.adyen-contract-viewer .adyen-document-viewer {
2465
- --adv-text-color: var(--adyen-internal-color-label-primary, #001222);
2466
- --adv-text-font-weight-regular: var(--adyen-internal-text-body-font-weight, 400);
2467
- --adv-text-font-weight-semi-bold: var(--adyen-internal-text-body-stronger-font-weight, 500);
2468
- --adv-text-line-height: var(--adyen-internal-text-body-line-height, 20px);
2469
- --adv-text-font-size-medium: var(--adyen-internal-text-body-font-size, 14px);
2470
- --adv-text-font-size-small: var(--adyen-internal-text-caption-font-size, 12px);
2471
- --adv-text-font-family: var(--adyen-internal-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2472
- --adv-heading-font-size: var(--adyen-internal-text-title-l-font-size, 24px);
2473
- --adv-heading-font-weight: var(--adyen-internal-text-title-l-font-weight, 600);
2474
- --adv-heading-line-height: var(--adyen-internal-text-title-l-line-height, 34px);
2475
- --adv-heading-2-font-size: var(--adyen-internal-text-title-m-font-size, 20px);
2476
- --adv-heading-2-font-weight: var(--adyen-internal-text-title-m-font-weight, 600);
2477
- --adv-heading-2-line-height: var(--adyen-internal-text-title-m-line-height, 30px);
2478
- --adv-color-white: var(--adyen-internal-color-background-primary, #ffffff);
2479
- --adv-color-grey-10: var(--adyen-internal-color-background-secondary, #f4f5f6);
2480
- --adv-color-grey-20: var(--adyen-internal-color-background-tertiary, #ecedef);
2481
- --adv-color-black: var(--adyen-internal-color-background-inverse-primary, #001222);
2482
- --adv-color-blue: var(--adyen-internal-color-decorative-blue, #006bd7);
2483
- --adv-accordion-header-color: var(--adyen-internal-color-label-primary, #001222);
2484
- --adv-accordion-header-font-weight: var(--adyen-internal-text-title-font-weight, 600);
2485
- --adv-accordion-header-hover-background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2486
- --adv-accordion-header-active-background-color: var(--adyen-internal-color-background-primary-active, #ecedef);
2487
- --adv-accordion-content-padding: 0;
2488
- --adv-background-color: var(--adyen-internal-color-background-primary, #ffffff);
2489
- --adv-section-background-color: var(--adyen-internal-color-background-primary, #ffffff);
2490
- --adv-table-row-changed-background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2491
- --adv-icon-color: var(--adyen-internal-color-label-primary, #001222);
2492
- --adv-link-color: var(--adyen-internal-color-link-primary, #0065c9);
2493
- --adv-link-active-color: var(--adyen-internal-color-link-primary, #0065c9);
2494
- --adv-link-visited-color: var(--adyen-internal-color-link-primary-visited, #540884);
2495
- }.adyen-document-viewer{--adv-color-white: #fff;--adv-color-black: #00112c;--adv-color-grey-10: #f3f6f9;--adv-color-grey-20: #dce0e5;--adv-color-blue: #06f;--adv-background-color: var(--adv-color-white);--adv-text-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--adv-text-color: var(--adv-color-black);--adv-text-font-weight-regular: 400;--adv-text-font-weight-semi-bold: 600;--adv-text-line-height: 1.4;--adv-text-font-size-medium: 15px;--adv-text-font-size-small: 13px;--adv-border-width: 1px;--adv-border-style: solid;--adv-border-color: var(--adv-color-grey-20);--adv-border-radius: 6px;--adv-transition-duration: .1s;--adv-transition-function: cubic-bezier(.785, .135, .15, .86);--adv-focus-ring-transition-duration: var(--adv-transition-duration);--adv-focus-ring-timing-function: var(--adv-transition-function);--adv-focus-ring-color: rgba(0, 102, 255, .4);--adv-focus-ring-distance: 1px;--adv-focus-ring-width: 3px;--adv-focus-ring-z-index: 1;--adv-focus-ring-background-color: var(--adv-color-white);--adv-spacing-0: 0;--adv-spacing-2: 2px;--adv-spacing-4: 4px;--adv-spacing-8: 8px;--adv-spacing-12: 12px;--adv-spacing-16: 16px;--adv-spacing-24: 24px;--adv-spacing-32: 32px;--adv-spacing-40: 40px;--adv-spacing-48: 48px;--adv-accordion-border-radius: var(--adv-border-radius);--adv-accordion-item-border-color: var(--adv-border-color);--adv-accordion-item-border-width: var(--adv-border-width);--adv-accordion-between-items-border-color: transparent;--adv-accordion-header-color: var(--adv-color-black);--adv-accordion-header-padding: var(--adv-spacing-16);--adv-accordion-header-font-weight: var(--adv-text-font-weight-semi-bold);--adv-accordion-header-hover-background-color: var(--adv-color-grey-10);--adv-accordion-header-active-background-color: var(--adv-color-grey-20);--adv-accordion-header-border-radius: var(--adv-spacing-4);--adv-accordion-title-color: inherit;--adv-accordion-toggle-margin: var(--adv-spacing-2) var(--adv-spacing-16) 0 0;--adv-accordion-toggle-padding: 0;--adv-accordion-toggle-width: var(--adv-spacing-12);--adv-accordion-content-margin: 0 0 var(--adv-spacing-24);--adv-accordion-content-padding: 0 var(--adv-spacing-16) 0 calc(var(--adv-spacing-32) + var(--adv-spacing-12));--adv-accordion-content-closed-margin: 0;--adv-accordion-transition-duration: var(--adv-transition-duration);--adv-accordion-transition-function: var(--adv-transition-function);--adv-accordion-transition-property: margin, height, padding;--adv-accordion-css-animated-max-height: 500px;--adv-accordion-css-animated-transition-duration: var(--adv-accordion-transition-duration);--adv-accordion-css-animated-transition-property: margin, max-height;--adv-heading-font-size: 32px;--adv-heading-font-weight: var(--adv-text-font-weight-semi-bold);--adv-heading-line-height: 40px;--adv-heading-text-align: left;--adv-heading-2-font-size: 24px;--adv-heading-2-font-weight: var(--adv-text-font-weight-semi-bold);--adv-heading-2-line-height: 32px;--adv-icon-color: var(--adv-color-black);--adv-link-color: var(--adv-color-blue);--adv-link-background-color: transparent;--adv-link-text-decoration: none;--adv-link-hover-text-decoration: underline;--adv-link-active-color: var(--adv-link-color);--adv-link-focus-outline: none;--adv-link-visited-color: var(--adv-link-color);--adv-link-inherit-font-size: inherit;--adv-link-inherit-color: inherit;--adv-link-underline-color: inherit;--adv-list-margin: 0;--adv-list-padding: 0 0 0 18px;--adv-list-nested-padding: var(--adv-list-padding);--adv-list-item-padding: 0 0 0 var(--adv-spacing-4);--adv-list-no-markers-padding: 0;--adv-list-no-markers-list-style: none;--adv-section-background-color: var(--adv-color-grey-10);--adv-section-border-radius: var(--adv-border-radius);--adv-section-margin: var(--adv-spacing-24) 0 0 0;--adv-section-padding: var(--adv-spacing-16);--adv-table-width: 100%;--adv-table-margin: 0;--adv-table-padding: 0;--adv-table-border: none;--adv-table-vertical-align: top;--adv-table-line-height: 16px;--adv-table-row-border-width: var(--adv-border-width);--adv-table-row-border-style: var(--adv-border-style);--adv-table-row-border-color: var(--adv-border-color);--adv-table-row-border: var(--adv-table-row-border-width) var(--adv-table-row-border-style) var(--adv-table-row-border-color);--adv-table-row-changed-background-color: var(--adv-color-grey-10);--adv-table-cell-padding-top: var(--adv-spacing-12);--adv-table-cell-padding-right: calc(var(--adv-spacing-16) + var(--adv-spacing-24));--adv-table-cell-padding-bottom: var(--adv-spacing-12);--adv-table-cell-padding-left: var(--adv-spacing-16);--adv-table-cell-padding: var(--adv-table-cell-padding-top) var(--adv-table-cell-padding-right) var(--adv-table-cell-padding-bottom) var(--adv-table-cell-padding-left);--adv-table-cell-text-align: left;--adv-table-first-column-padding-left: var(--adv-spacing-24);--adv-table-condensed-cell-padding-y: var(--adv-spacing-8);--adv-table-condensed-cell-padding: var(--adv-table-condensed-cell-padding-y) var(--adv-table-cell-padding-right) var(--adv-table-condensed-cell-padding-y) var(--adv-table-cell-padding-left);--adv-table-condensed-font-size: var(--adv-text-font-size-small)}.adv-u-text-align-center{text-align:center!important}.adv-u-margin-bottom-16{margin-bottom:var(--adv-spacing-16)!important}.adv-u-margin-bottom-48{margin-bottom:var(--adv-spacing-48)!important}.adv-u-margin-top-24{margin-top:var(--adv-spacing-24)!important}.adv-u-margin-y-8{margin-bottom:var(--adv-spacing-8)!important;margin-top:var(--adv-spacing-8)!important}.adv-u-font-weight-regular{font-weight:var(--adv-text-font-weight-regular)!important}.adv-u-font-weight-semi-bold{font-weight:var(--adv-text-font-weight-semi-bold)!important}.adv-u-font-italic{font-style:italic!important}.adyen-document-viewer{background-color:var(--adv-background-color)}.adv-accordion{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-accordion *,.adv-accordion *:before,.adv-accordion *:after{box-sizing:border-box}.adv-accordion--container{border:var(--adv-accordion-item-border-width) solid var(--adv-accordion-item-border-color);border-radius:var(--adv-accordion-border-radius)}.adv-accordion--container .adv-accordion__item:first-child{border-top-color:transparent}.adv-accordion--container .adv-accordion__item:first-child>.adv-accordion__header{border-radius:var(--adv-accordion-header-border-radius) var(--adv-accordion-header-border-radius) 0 0}.adv-accordion--container .adv-accordion__item:last-child{border-bottom-color:transparent}.adv-accordion--container .adv-accordion__item:last-child:not(.adv-accordion__item--open)>.adv-accordion__header{border-radius:0 0 var(--adv-accordion-header-border-radius) var(--adv-accordion-header-border-radius)}.adv-bigskip{height:var(--adv-text-font-size-medium)}.adv-heading{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-heading *,.adv-heading *:before,.adv-heading *:after{box-sizing:border-box}.adv-heading{display:block;font-size:var(--adv-heading-font-size);font-weight:var(--adv-heading-font-weight);line-height:var(--adv-heading-line-height);margin:0;padding:0;text-align:var(--adv-heading-text-align)}.adv-heading--2{font-size:var(--adv-heading-2-font-size);font-weight:var(--adv-heading-2-font-weight);line-height:var(--adv-heading-2-line-height)}.adv-link{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-link *,.adv-link *:before,.adv-link *:after{box-sizing:border-box}.adv-link{background-color:var(--adv-link-background-color);border:0;color:var(--adv-link-color);cursor:pointer;display:inline;max-width:300px;overflow:hidden;padding:0;text-decoration:var(--adv-link-text-decoration);text-overflow:ellipsis;vertical-align:baseline}.adv-link:hover{text-decoration:var(--adv-link-hover-text-decoration)}.adv-link:active{color:var(--adv-link-active-color)}.adv-link:focus{outline:var(--adv-link-focus-outline);text-decoration:var(--adv-link-hover-text-decoration)}.adv-link:visited{color:var(--adv-link-visited-color)}.adv-list{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-list *,.adv-list *:before,.adv-list *:after{box-sizing:border-box}.adv-list{display:block;list-style-position:outside;list-style-type:disc;margin:var(--adv-list-margin);padding:var(--adv-list-padding)}.adv-list--no-markers{list-style:var(--adv-list-no-markers-list-style);padding:var(--adv-list-no-markers-padding)}.adv-list--no-markers .adv-list__item{padding-left:0}.adv-list__item{padding:var(--adv-list-item-padding)}.adv-list__item--no-marker{list-style:var(--adv-list-no-markers-list-style)}.adv-list--nested{list-style-type:circle;padding:var(--adv-list-nested-padding)}.adv-list--ordered{list-style-type:decimal}.adv-paragraph{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-paragraph *,.adv-paragraph *:before,.adv-paragraph *:after{box-sizing:border-box}.adv-paragraph{margin-bottom:0;margin-top:0}.adv-paragraph:not(:first-child){margin-top:var(--adv-spacing-16)}.adv-section-box{background-color:var(--adv-section-background-color);border-radius:var(--adv-section-border-radius);margin:var(--adv-section-margin);padding:var(--adv-section-padding)}.adv-accordion__item{border-bottom:var(--adv-accordion-item-border-width) solid var(--adv-accordion-between-items-border-color);border-top:var(--adv-accordion-item-border-width) solid var(--adv-accordion-item-border-color);position:relative}.adv-accordion__item:last-child{border-bottom-color:var(--adv-accordion-item-border-color)}.adv-accordion__item--open{overflow:visible}.adv-accordion__header{color:var(--adv-accordion-header-color);cursor:pointer;display:flex;padding:var(--adv-accordion-header-padding);transition-duration:var(--adv-accordion-transition-duration);transition-property:var(--adv-accordion-transition-property)}.adv-accordion__header:hover{background-color:var(--adv-accordion-header-hover-background-color)}.adv-accordion__header:active{background-color:var(--adv-accordion-header-active-background-color)}.adv-accordion__header:focus{box-shadow:0 0 0 var(--adv-focus-ring-distance) var(--adv-focus-ring-background-color),0 0 0 var(--adv-focus-ring-width) var(--adv-focus-ring-color);transition:var(--adv-focus-ring-transition-duration) var(--adv-focus-ring-timing-function);transition-property:box-shadow;outline:none}.adv-accordion__title-wrapper{flex:1}.adv-accordion__title{color:var(--adv-accordion-title-color);font-weight:var(--adv-accordion-header-font-weight)}.adv-accordion__toggle{line-height:1;margin:var(--adv-accordion-toggle-margin);padding:var(--adv-accordion-toggle-padding);width:var(--adv-accordion-toggle-width)}.adv-accordion__content{box-sizing:border-box;margin:var(--adv-accordion-content-margin);overflow-x:auto;overflow-y:hidden;padding:var(--adv-accordion-content-padding);transition-duration:var(--adv-accordion-transition-duration);transition-property:var(--adv-accordion-transition-property)}.adv-accordion__item>.adv-accordion__content{margin:var(--adv-accordion-content-closed-margin)}.adv-accordion__item--open>.adv-accordion__content{margin:var(--adv-accordion-content-margin)}.adv-accordion--max-height-transition .adv-accordion__item>.adv-accordion__content{max-height:0;transition-duration:var(--adv-accordion-css-animated-transition-duration);transition-property:var(--adv-accordion-css-animated-transition-property)}.adv-accordion--max-height-transition .adv-accordion__item--open>.adv-accordion__content{max-height:var(--adv-accordion-css-animated-max-height)}.adv-collapsible-container{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-collapsible-container *,.adv-collapsible-container *:before,.adv-collapsible-container *:after{box-sizing:border-box}.adv-collapsible-container{overflow:hidden;transition:height var(--adv-accordion-transition-duration) var(--adv-accordion-transition-function)}.adv-icon{display:inline-block;fill:var(--adv-icon-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:400;line-height:1;position:relative;speak:none;text-transform:none;vertical-align:baseline}.adv-table{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-table *,.adv-table *:before,.adv-table *:after{box-sizing:border-box}.adv-table{border:var(--adv-table-border);border-collapse:collapse;border-spacing:0;line-height:var(--adv-table-line-height);margin:var(--adv-table-margin);padding:var(--adv-table-padding);text-align:left;width:var(--adv-table-width)}.adv-table--condensed .adv-table__cell{font-size:var(--adv-table-condensed-font-size);padding:var(--adv-table-condensed-cell-padding)}.adv-table__row{vertical-align:var(--adv-table-vertical-align);border-bottom:var(--adv-table-row-border)}.adv-table__row--changed{background-color:var(--adv-table-row-changed-background-color)}.adv-table__body{vertical-align:var(--adv-table-vertical-align)}.adv-table__body .adv-table__row:hover{background-color:var(--adv-table-row-changed-background-color)}.adv-table__cell{border-left:var(--adv-border-width) solid transparent;border-right:var(--adv-border-width) solid transparent;overflow:auto;padding:var(--adv-table-cell-padding);text-align:var(--adv-table-cell-text-align);vertical-align:inherit}.adv-table__cell:first-child,.adv-table__cell--first-column{padding-left:var(--adv-table-first-column-padding-left)}
2496
- .adyen-kyc-tos-signed-alert:last-of-type {
2497
- margin-top: var(--adyen-internal-spacer-070);
2515
+
2516
+ .adyen-kyc-select-input--active,
2517
+ .adyen-kyc-select-input--active:hover,
2518
+ .adyen-kyc-select-input-wrapper:active,
2519
+ .adyen-kyc-select-input-wrapper:focus {
2520
+ border-color: var(--adyen-internal-color-outline-tertiary-active, #001222);
2521
+ outline: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary-active, #001222);
2498
2522
  }
2499
2523
 
2500
- .adyen-kyc-tos-container {
2501
- height: 100%;
2524
+ .adyen-kyc-select-input-wrapper.adyen-kyc-select-input--readonly {
2525
+ background-color: var(--adyen-internal-color-background-disabled, #ecedef);
2526
+ color: var(--adyen-internal-color-label-disabled, #8c959d);
2527
+ cursor: not-allowed;
2528
+ pointer-events: none;
2529
+ border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-disabled, #dadddf);
2502
2530
  }
2503
2531
 
2504
- .adyen-kyc-tos-content {
2505
- display: flex;
2506
- padding: var(--adyen-internal-spacer-070);
2532
+ .adyen-kyc-select-input.adyen-kyc-select-input--readonly {
2533
+ background-color: var(--adyen-internal-color-background-disabled, #ecedef);
2534
+ color: var(--adyen-internal-color-label-disabled, #8c959d);
2535
+ cursor: not-allowed;
2536
+ pointer-events: none;
2507
2537
  }
2508
2538
 
2509
- .adyen-kyc-tos-actions {
2510
- display: flex;
2511
- justify-content: space-between;
2512
- align-items: center;
2513
- gap: var(--adyen-internal-spacer-040);
2514
- padding: var(--adyen-internal-spacer-070);
2539
+ .adyen-kyc-select-input--readonly::after {
2540
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19471 6.5646C3.59429 7.09797 4.39396 7.0986 4.79439 6.56587L7.78716 2.58424C8.28257 1.92514 7.81232 0.983398 6.98779 0.983398L1.01209 0.983398C0.188292 0.983398 -0.282154 1.92367 0.211778 2.58298L3.19471 6.5646Z' fill='%23B9C4C9'/%3E%3C/svg%3E%0A");
2541
+ }
2515
2542
 
2516
- &:has(> :only-child) {
2517
- justify-content: flex-end;
2518
- }
2543
+ .adyen-kyc-select-input--invalid {
2544
+ border-color: var(--adyen-internal-color-outline-critical, #dc3801);
2519
2545
  }
2520
- /* for container queries */
2521
- .adyen-kyc-stack-layout {
2546
+
2547
+ .adyen-kyc-select-input--minimal {
2548
+ min-height: unset;
2549
+ height: 100%;
2550
+ background: var(--adyen-internal-color-background-secondary, #f4f5f6);
2551
+ border: none;
2552
+ border-radius: var(--adyen-internal-border-radius-s, 4px);
2553
+ }
2554
+
2555
+ .adyen-kyc-select-input-search {
2556
+ align-items: center;
2522
2557
  display: flex;
2523
- flex-direction: column;
2558
+ width: 100%;
2559
+ }
2560
+ .adyen-kyc-select-input-search__icon {
2561
+ color: var(--adyen-internal-color-label-tertiary, #8c959d);
2562
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2563
+ font-family: var(--adyen-internal-text-caption-font-family);
2564
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2565
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2566
+ padding-right: var(--adyen-internal-spacer-040, 8px);
2567
+ }
2568
+ .adyen-kyc-select-input-search .adyen-kyc-select-input--filterable::placeholder {
2569
+ color: var(--adyen-internal-color-label-tertiary, #8c959d);
2524
2570
  }
2525
2571
 
2526
- .adyen-kyc-stack-layout-gap-xs {
2527
- gap: var(--adyen-internal-spacer-020);
2572
+ .adyen-kyc-select-input-search::after {
2573
+ display: none;
2528
2574
  }
2529
2575
 
2530
- .adyen-kyc-stack-layout-gap-s {
2531
- gap: var(--adyen-internal-spacer-040);
2576
+ .adyen-kyc-select-input-wrapper--filterable {
2577
+ cursor: text;
2532
2578
  }
2533
2579
 
2534
- .adyen-kyc-stack-layout-gap-m {
2535
- gap: var(--adyen-internal-spacer-070);
2580
+ .adyen-kyc-select-input-wrapper--non-filterable {
2581
+ cursor: pointer;
2536
2582
  }
2537
2583
 
2538
- .adyen-kyc-stack-layout-gap-l {
2539
- gap: var(--adyen-internal-spacer-100);
2584
+ .adyen-kyc-select-input-wrapper::after {
2585
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19471 6.5646C3.59429 7.09797 4.39396 7.0986 4.79439 6.56587L7.78716 2.58424C8.28257 1.92514 7.81232 0.983398 6.98779 0.983398L1.01209 0.983398C0.188292 0.983398 -0.282154 1.92367 0.211778 2.58298L3.19471 6.5646Z' fill='%23687282'/%3E%3C/svg%3E%0A");
2586
+ background-position: center;
2587
+ background-repeat: no-repeat;
2588
+ content: "";
2589
+ height: 6px;
2590
+ position: absolute;
2591
+ right: 16px;
2592
+ width: 8px;
2540
2593
  }
2541
2594
 
2542
- .adyen-kyc-stack-layout-gap-xl {
2543
- gap: var(--adyen-internal-spacer-140);
2595
+ .adyen-kyc-select-input--list-open::after {
2596
+ transform: rotate(180deg);
2544
2597
  }
2545
2598
 
2546
- .adyen-kyc-stack-layout-left {
2547
- align-items: flex-start;
2599
+ .adyen-kyc-select-input--filterable {
2600
+ border: 0;
2601
+ caret-color: var(--adyen-internal-color-label-highlight, #0f75dc);
2602
+ color: var(--adyen-internal-color-label-primary, #001222);
2603
+ font-family: inherit;
2604
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2605
+ height: 100%;
2606
+ padding: var(--adyen-internal-spacer-000, 0px);
2607
+ width: 100%;
2608
+ }
2609
+ .adyen-kyc-select-input--filterable::placeholder {
2610
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2611
+ font-weight: var(--adyen-internal-text-body-font-weight, 400);
2612
+ }
2613
+ .adyen-kyc-select-input--filterable:focus, .adyen-kyc-select-input--filterable:active {
2614
+ outline: 0;
2548
2615
  }
2549
2616
 
2550
- .adyen-kyc-stack-layout-center {
2551
- align-items: center;
2617
+ .adyen-kyc-select-input--non-filterable {
2618
+ all: unset;
2552
2619
  }
2553
2620
 
2554
- .adyen-kyc-stack-layout-right {
2555
- align-items: flex-end;
2621
+ .adyen-kyc-select-input--placeholder {
2622
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2623
+ font-weight: var(--adyen-internal-text-body-font-weight, 400);
2556
2624
  }
2557
2625
 
2558
- .adyen-kyc-stack-layout-item {
2626
+ .adyen-kyc-ignore-pointer-events {
2627
+ pointer-events: none;
2628
+ }
2629
+
2630
+ .adyen-kyc-handle-pointer-events {
2631
+ pointer-events: auto;
2632
+ }.adyen-kyc-end-state-layout {
2633
+ align-items: center;
2634
+ display: flex;
2635
+ flex-direction: column;
2559
2636
  flex-grow: 1;
2637
+ gap: var(--adyen-internal-spacer-100);
2638
+ height: 100%;
2639
+ justify-content: center;
2640
+ margin-left: auto;
2641
+ margin-right: auto;
2642
+ max-width: 600px;
2560
2643
  width: 100%;
2561
2644
  }
2562
2645
 
2563
- @container main (min-width: 480px) {
2564
- .adyen-kyc-stack-layout-horizontal {
2565
- align-items: flex-start;
2566
- flex-direction: row;
2567
- }
2568
- .adyen-kyc-stack-layout-left-horizontal {
2569
- justify-content: flex-start;
2570
- }
2571
- .adyen-kyc-stack-layout-center-horizontal {
2572
- justify-content: center;
2573
- }
2574
- .adyen-kyc-stack-layout-right-horizontal {
2575
- justify-content: flex-end;
2576
- }
2577
- }/* for container queries */
2578
- .adyen-kyc-status {
2646
+ .adyen-kyc-end-state-layout-header {
2579
2647
  align-items: center;
2580
- border-radius: var(--adyen-internal-border-radius-xl);
2581
- display: inline-flex;
2582
- padding: var(--adyen-internal-spacer-020);
2648
+ display: flex;
2649
+ flex-direction: column;
2650
+ gap: var(--adyen-internal-spacer-040);
2651
+ text-align: center;
2583
2652
  }
2584
2653
 
2585
- .adyen-kyc-status-icon {
2586
- height: 18px;
2587
- width: 18px;
2588
- padding: 1px;
2654
+ .adyen-kyc-end-state-layout-icon {
2655
+ align-items: center;
2656
+ border-radius: 50%;
2657
+ display: flex;
2658
+ height: 64px;
2659
+ justify-content: center;
2660
+ width: 64px;
2589
2661
  }
2590
2662
 
2591
- .adyen-kyc-status-icon svg {
2592
- height: 16px;
2593
- width: 16px;
2663
+ .adyen-kyc-end-state-layout-icon svg {
2664
+ height: 24px;
2665
+ width: 24px;
2594
2666
  }
2595
2667
 
2596
- .adyen-kyc-status-text {
2597
- font-size: var(--adyen-internal-text-caption-font-size);
2598
- font-weight: var(--adyen-internal-text-caption-stronger-font-weight);
2599
- line-height: var(--adyen-internal-text-caption-line-height);
2600
- padding-left: var(--adyen-internal-spacer-020);
2601
- padding-right: var(--adyen-internal-spacer-020);
2668
+ .adyen-kyc-end-state-layout-icon-success {
2669
+ background-color: var(--adyen-internal-color-decorative-green);
2670
+ box-shadow: var(--adyen-internal-shadow-medium);
2671
+ color: var(--adyen-internal-color-label-on-color);
2602
2672
  }
2603
2673
 
2604
- @container main (max-width: 480px) {
2605
- .adyen-kyc-status-text-responsive {
2606
- display: none;
2607
- }
2674
+ .adyen-kyc-end-state-layout-icon-error {
2675
+ background-color: var(--adyen-internal-color-background-critical-strong);
2676
+ box-shadow: var(--adyen-internal-shadow-medium);
2677
+ color: var(--adyen-internal-color-label-on-color);
2608
2678
  }
2609
2679
 
2610
- .adyen-kyc-status-neutral {
2611
- background-color: var(--adyen-internal-color-background-secondary);
2612
- color: var(--adyen-internal-color-label-disabled);
2613
- fill: var(--adyen-internal-color-label-disabled);
2680
+ .adyen-kyc-end-state-layout-icon-info {
2681
+ background-color: var(--adyen-internal-color-background-highlight-weak);
2682
+ color: var(--adyen-internal-color-label-highlight);
2614
2683
  }
2615
2684
 
2616
- .adyen-kyc-status-neutral .adyen-kyc-status-text {
2685
+ .adyen-kyc-end-state-layout-icon-warning {
2686
+ background-color: var(--adyen-internal-color-decorative-yellow);
2687
+ color: var(--adyen-internal-color-label-primary);
2688
+ }
2689
+
2690
+ .adyen-kyc-end-state-layout-text {
2691
+ align-items: center;
2692
+ display: flex;
2693
+ flex-direction: column;
2694
+ gap: var(--adyen-internal-spacer-040);
2695
+ text-align: center;
2696
+ }
2697
+
2698
+ .adyen-kyc-end-state-layout-title {
2699
+ color: var(--adyen-internal-color-label-primary);
2700
+ font-size: var(--adyen-internal-text-title-m-font-size);
2701
+ font-weight: var(--adyen-internal-text-title-m-font-weight);
2702
+ line-height: var(--adyen-internal-text-title-m-line-height);
2703
+ margin: 0;
2704
+ }
2705
+
2706
+ .adyen-kyc-end-state-layout-description {
2617
2707
  color: var(--adyen-internal-color-label-secondary);
2708
+ font-size: var(--adyen-internal-text-body-font-size);
2709
+ font-weight: var(--adyen-internal-text-body-font-weight);
2710
+ line-height: var(--adyen-internal-text-body-line-height);
2618
2711
  }
2619
2712
 
2620
- .adyen-kyc-status-error {
2621
- background-color: var(--adyen-internal-color-background-secondary);
2622
- color: var(--adyen-internal-color-label-critical);
2623
- fill: var(--adyen-internal-color-label-critical);
2713
+ .adyen-kyc-end-state-layout-action {
2714
+ display: flex;
2715
+ flex-direction: column;
2716
+ gap: var(--adyen-internal-spacer-040);
2717
+ max-width: 320px;
2718
+ width: 100%;
2719
+ }
2720
+ /* for container queries */
2721
+ .adyen-kyc-form-navigation {
2722
+ width: 100%;
2723
+ }
2724
+ @container main (max-width: 680px) {
2725
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
2726
+ display: none;
2727
+ }
2728
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
2729
+ font-size: 0;
2730
+ }
2731
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
2732
+ font-size: var(--adyen-internal-text-title-font-size, 16px);
2733
+ font-family: var(--adyen-internal-text-title-font-family);
2734
+ font-weight: var(--adyen-internal-text-title-font-weight, 600);
2735
+ line-height: var(--adyen-internal-text-title-line-height, 26px);
2736
+ padding-left: var(--adyen-internal-spacer-000, 0px);
2737
+ }
2738
+ }
2739
+ @container main (min-width: 680px) and (max-width: 1024px) {
2740
+ .adyen-kyc-form-navigation {
2741
+ padding-right: var(--adyen-internal-spacer-100, 32px);
2742
+ }
2743
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
2744
+ display: none;
2745
+ }
2624
2746
  }
2625
-
2626
- .adyen-kyc-status-warning {
2627
- background-color: var(--adyen-internal-color-background-warning-weak);
2628
- color: var(--adyen-internal-color-label-warning);
2629
- fill: var(--adyen-internal-color-label-warning);
2747
+ @container main (max-width: 680px) {
2748
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
2749
+ display: none;
2750
+ }
2630
2751
  }
2631
-
2632
- .adyen-kyc-status-success {
2633
- background-color: var(--adyen-internal-color-background-success-weak);
2752
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__items {
2753
+ margin: var(--adyen-internal-spacer-040, 8px) 0 0 0;
2754
+ padding: var(--adyen-internal-spacer-000, 0px);
2634
2755
  }
2635
2756
 
2636
- .adyen-kyc-status-success .adyen-kyc-status-text {
2637
- color: var(--adyen-internal-color-label-primary);
2757
+ .adyen-kyc-form-navigation__home-button-item {
2758
+ align-items: center;
2759
+ display: flex;
2760
+ justify-content: space-between;
2761
+ list-style-type: none;
2762
+ margin-bottom: var(--adyen-internal-spacer-070, 16px);
2763
+ }.adyen-kyc-form-navigation__item {
2764
+ align-items: center;
2765
+ border-left: var(--adyen-internal-border-default-m);
2766
+ color: var(--adyen-internal-color-label-primary, #001222);
2767
+ cursor: default;
2768
+ display: flex;
2769
+ padding: var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-040, 8px);
2638
2770
  }
2639
-
2640
- .adyen-kyc-status-success .adyen-kyc-status-icon {
2641
- color: var(--adyen-internal-color-label-success);
2642
- fill: var(--adyen-internal-color-label-success);
2643
- }.adyen-kyc-header {
2771
+ .adyen-kyc-form-navigation__item button {
2644
2772
  display: flex;
2645
- flex-direction: column;
2646
- gap: var(--adyen-internal-spacer-070);
2773
+ background: none;
2774
+ border: none;
2775
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2776
+ line-height: var(--adyen-internal-text-body-line-height, 20px);
2777
+ padding: var(--adyen-internal-spacer-000, 0px);
2778
+ color: inherit;
2779
+ text-align: left;
2647
2780
  }
2648
-
2649
- .adyen-kyc-header-margin {
2650
- margin-bottom: var(--adyen-internal-spacer-140);
2781
+ .adyen-kyc-form-navigation__item--active {
2782
+ border-left: var(--adyen-internal-border-width-m, 2px) solid;
2783
+ color: var(--adyen-internal-color-label-highlight, #0f75dc);
2651
2784
  }
2652
-
2653
- .adyen-kyc-header-margin-secondary {
2654
- margin-bottom: var(--adyen-internal-spacer-100);
2785
+ .adyen-kyc-form-navigation__item--isnav button {
2786
+ cursor: pointer;
2655
2787
  }
2656
2788
 
2657
- .adyen-kyc-header-left {
2658
- align-items: flex-start;
2659
- text-align: left;
2789
+ .adyen-kyc-form-navigation__item-icon {
2790
+ display: flex;
2791
+ margin-left: var(--adyen-internal-spacer-040, 8px);
2660
2792
  }
2661
-
2662
- .adyen-kyc-header-center {
2663
- align-items: center;
2664
- text-align: center;
2793
+ .adyen-kyc-form-navigation__item-icon--success {
2794
+ color: var(--adyen-internal-color-label-success, #008845);
2795
+ }
2796
+ .adyen-kyc-form-navigation__item-icon--error {
2797
+ color: var(--adyen-internal-color-label-critical, #dc3801);
2798
+ }.adyen-contract-viewer .adyen-document-viewer {
2799
+ --adv-text-color: var(--adyen-internal-color-label-primary, #001222);
2800
+ --adv-text-font-weight-regular: var(--adyen-internal-text-body-font-weight, 400);
2801
+ --adv-text-font-weight-semi-bold: var(--adyen-internal-text-body-stronger-font-weight, 500);
2802
+ --adv-text-line-height: var(--adyen-internal-text-body-line-height, 20px);
2803
+ --adv-text-font-size-medium: var(--adyen-internal-text-body-font-size, 14px);
2804
+ --adv-text-font-size-small: var(--adyen-internal-text-caption-font-size, 12px);
2805
+ --adv-text-font-family: var(--adyen-internal-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2806
+ --adv-heading-font-size: var(--adyen-internal-text-title-l-font-size, 24px);
2807
+ --adv-heading-font-weight: var(--adyen-internal-text-title-l-font-weight, 600);
2808
+ --adv-heading-line-height: var(--adyen-internal-text-title-l-line-height, 34px);
2809
+ --adv-heading-2-font-size: var(--adyen-internal-text-title-m-font-size, 20px);
2810
+ --adv-heading-2-font-weight: var(--adyen-internal-text-title-m-font-weight, 600);
2811
+ --adv-heading-2-line-height: var(--adyen-internal-text-title-m-line-height, 30px);
2812
+ --adv-color-white: var(--adyen-internal-color-background-primary, #ffffff);
2813
+ --adv-color-grey-10: var(--adyen-internal-color-background-secondary, #f4f5f6);
2814
+ --adv-color-grey-20: var(--adyen-internal-color-background-tertiary, #ecedef);
2815
+ --adv-color-black: var(--adyen-internal-color-background-inverse-primary, #001222);
2816
+ --adv-color-blue: var(--adyen-internal-color-decorative-blue, #006bd7);
2817
+ --adv-accordion-header-color: var(--adyen-internal-color-label-primary, #001222);
2818
+ --adv-accordion-header-font-weight: var(--adyen-internal-text-title-font-weight, 600);
2819
+ --adv-accordion-header-hover-background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2820
+ --adv-accordion-header-active-background-color: var(--adyen-internal-color-background-primary-active, #ecedef);
2821
+ --adv-accordion-content-padding: 0;
2822
+ --adv-background-color: var(--adyen-internal-color-background-primary, #ffffff);
2823
+ --adv-section-background-color: var(--adyen-internal-color-background-primary, #ffffff);
2824
+ --adv-table-row-changed-background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2825
+ --adv-icon-color: var(--adyen-internal-color-label-primary, #001222);
2826
+ --adv-link-color: var(--adyen-internal-color-link-primary, #0065c9);
2827
+ --adv-link-active-color: var(--adyen-internal-color-link-primary, #0065c9);
2828
+ --adv-link-visited-color: var(--adyen-internal-color-link-primary-visited, #540884);
2829
+ }.adyen-document-viewer{--adv-color-white: #fff;--adv-color-black: #00112c;--adv-color-grey-10: #f3f6f9;--adv-color-grey-20: #dce0e5;--adv-color-blue: #06f;--adv-background-color: var(--adv-color-white);--adv-text-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--adv-text-color: var(--adv-color-black);--adv-text-font-weight-regular: 400;--adv-text-font-weight-semi-bold: 600;--adv-text-line-height: 1.4;--adv-text-font-size-medium: 15px;--adv-text-font-size-small: 13px;--adv-border-width: 1px;--adv-border-style: solid;--adv-border-color: var(--adv-color-grey-20);--adv-border-radius: 6px;--adv-transition-duration: .1s;--adv-transition-function: cubic-bezier(.785, .135, .15, .86);--adv-focus-ring-transition-duration: var(--adv-transition-duration);--adv-focus-ring-timing-function: var(--adv-transition-function);--adv-focus-ring-color: rgba(0, 102, 255, .4);--adv-focus-ring-distance: 1px;--adv-focus-ring-width: 3px;--adv-focus-ring-z-index: 1;--adv-focus-ring-background-color: var(--adv-color-white);--adv-spacing-0: 0;--adv-spacing-2: 2px;--adv-spacing-4: 4px;--adv-spacing-8: 8px;--adv-spacing-12: 12px;--adv-spacing-16: 16px;--adv-spacing-24: 24px;--adv-spacing-32: 32px;--adv-spacing-40: 40px;--adv-spacing-48: 48px;--adv-accordion-border-radius: var(--adv-border-radius);--adv-accordion-item-border-color: var(--adv-border-color);--adv-accordion-item-border-width: var(--adv-border-width);--adv-accordion-between-items-border-color: transparent;--adv-accordion-header-color: var(--adv-color-black);--adv-accordion-header-padding: var(--adv-spacing-16);--adv-accordion-header-font-weight: var(--adv-text-font-weight-semi-bold);--adv-accordion-header-hover-background-color: var(--adv-color-grey-10);--adv-accordion-header-active-background-color: var(--adv-color-grey-20);--adv-accordion-header-border-radius: var(--adv-spacing-4);--adv-accordion-title-color: inherit;--adv-accordion-toggle-margin: var(--adv-spacing-2) var(--adv-spacing-16) 0 0;--adv-accordion-toggle-padding: 0;--adv-accordion-toggle-width: var(--adv-spacing-12);--adv-accordion-content-margin: 0 0 var(--adv-spacing-24);--adv-accordion-content-padding: 0 var(--adv-spacing-16) 0 calc(var(--adv-spacing-32) + var(--adv-spacing-12));--adv-accordion-content-closed-margin: 0;--adv-accordion-transition-duration: var(--adv-transition-duration);--adv-accordion-transition-function: var(--adv-transition-function);--adv-accordion-transition-property: margin, height, padding;--adv-accordion-css-animated-max-height: 500px;--adv-accordion-css-animated-transition-duration: var(--adv-accordion-transition-duration);--adv-accordion-css-animated-transition-property: margin, max-height;--adv-heading-font-size: 32px;--adv-heading-font-weight: var(--adv-text-font-weight-semi-bold);--adv-heading-line-height: 40px;--adv-heading-text-align: left;--adv-heading-2-font-size: 24px;--adv-heading-2-font-weight: var(--adv-text-font-weight-semi-bold);--adv-heading-2-line-height: 32px;--adv-icon-color: var(--adv-color-black);--adv-link-color: var(--adv-color-blue);--adv-link-background-color: transparent;--adv-link-text-decoration: none;--adv-link-hover-text-decoration: underline;--adv-link-active-color: var(--adv-link-color);--adv-link-focus-outline: none;--adv-link-visited-color: var(--adv-link-color);--adv-link-inherit-font-size: inherit;--adv-link-inherit-color: inherit;--adv-link-underline-color: inherit;--adv-list-margin: 0;--adv-list-padding: 0 0 0 18px;--adv-list-nested-padding: var(--adv-list-padding);--adv-list-item-padding: 0 0 0 var(--adv-spacing-4);--adv-list-no-markers-padding: 0;--adv-list-no-markers-list-style: none;--adv-section-background-color: var(--adv-color-grey-10);--adv-section-border-radius: var(--adv-border-radius);--adv-section-margin: var(--adv-spacing-24) 0 0 0;--adv-section-padding: var(--adv-spacing-16);--adv-table-width: 100%;--adv-table-margin: 0;--adv-table-padding: 0;--adv-table-border: none;--adv-table-vertical-align: top;--adv-table-line-height: 16px;--adv-table-row-border-width: var(--adv-border-width);--adv-table-row-border-style: var(--adv-border-style);--adv-table-row-border-color: var(--adv-border-color);--adv-table-row-border: var(--adv-table-row-border-width) var(--adv-table-row-border-style) var(--adv-table-row-border-color);--adv-table-row-changed-background-color: var(--adv-color-grey-10);--adv-table-cell-padding-top: var(--adv-spacing-12);--adv-table-cell-padding-right: calc(var(--adv-spacing-16) + var(--adv-spacing-24));--adv-table-cell-padding-bottom: var(--adv-spacing-12);--adv-table-cell-padding-left: var(--adv-spacing-16);--adv-table-cell-padding: var(--adv-table-cell-padding-top) var(--adv-table-cell-padding-right) var(--adv-table-cell-padding-bottom) var(--adv-table-cell-padding-left);--adv-table-cell-text-align: left;--adv-table-first-column-padding-left: var(--adv-spacing-24);--adv-table-condensed-cell-padding-y: var(--adv-spacing-8);--adv-table-condensed-cell-padding: var(--adv-table-condensed-cell-padding-y) var(--adv-table-cell-padding-right) var(--adv-table-condensed-cell-padding-y) var(--adv-table-cell-padding-left);--adv-table-condensed-font-size: var(--adv-text-font-size-small)}.adv-u-text-align-center{text-align:center!important}.adv-u-margin-bottom-16{margin-bottom:var(--adv-spacing-16)!important}.adv-u-margin-bottom-48{margin-bottom:var(--adv-spacing-48)!important}.adv-u-margin-top-24{margin-top:var(--adv-spacing-24)!important}.adv-u-margin-y-8{margin-bottom:var(--adv-spacing-8)!important;margin-top:var(--adv-spacing-8)!important}.adv-u-font-weight-regular{font-weight:var(--adv-text-font-weight-regular)!important}.adv-u-font-weight-semi-bold{font-weight:var(--adv-text-font-weight-semi-bold)!important}.adv-u-font-italic{font-style:italic!important}.adyen-document-viewer{background-color:var(--adv-background-color)}.adv-accordion{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-accordion *,.adv-accordion *:before,.adv-accordion *:after{box-sizing:border-box}.adv-accordion--container{border:var(--adv-accordion-item-border-width) solid var(--adv-accordion-item-border-color);border-radius:var(--adv-accordion-border-radius)}.adv-accordion--container .adv-accordion__item:first-child{border-top-color:transparent}.adv-accordion--container .adv-accordion__item:first-child>.adv-accordion__header{border-radius:var(--adv-accordion-header-border-radius) var(--adv-accordion-header-border-radius) 0 0}.adv-accordion--container .adv-accordion__item:last-child{border-bottom-color:transparent}.adv-accordion--container .adv-accordion__item:last-child:not(.adv-accordion__item--open)>.adv-accordion__header{border-radius:0 0 var(--adv-accordion-header-border-radius) var(--adv-accordion-header-border-radius)}.adv-bigskip{height:var(--adv-text-font-size-medium)}.adv-heading{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-heading *,.adv-heading *:before,.adv-heading *:after{box-sizing:border-box}.adv-heading{display:block;font-size:var(--adv-heading-font-size);font-weight:var(--adv-heading-font-weight);line-height:var(--adv-heading-line-height);margin:0;padding:0;text-align:var(--adv-heading-text-align)}.adv-heading--2{font-size:var(--adv-heading-2-font-size);font-weight:var(--adv-heading-2-font-weight);line-height:var(--adv-heading-2-line-height)}.adv-link{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-link *,.adv-link *:before,.adv-link *:after{box-sizing:border-box}.adv-link{background-color:var(--adv-link-background-color);border:0;color:var(--adv-link-color);cursor:pointer;display:inline;max-width:300px;overflow:hidden;padding:0;text-decoration:var(--adv-link-text-decoration);text-overflow:ellipsis;vertical-align:baseline}.adv-link:hover{text-decoration:var(--adv-link-hover-text-decoration)}.adv-link:active{color:var(--adv-link-active-color)}.adv-link:focus{outline:var(--adv-link-focus-outline);text-decoration:var(--adv-link-hover-text-decoration)}.adv-link:visited{color:var(--adv-link-visited-color)}.adv-list{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-list *,.adv-list *:before,.adv-list *:after{box-sizing:border-box}.adv-list{display:block;list-style-position:outside;list-style-type:disc;margin:var(--adv-list-margin);padding:var(--adv-list-padding)}.adv-list--no-markers{list-style:var(--adv-list-no-markers-list-style);padding:var(--adv-list-no-markers-padding)}.adv-list--no-markers .adv-list__item{padding-left:0}.adv-list__item{padding:var(--adv-list-item-padding)}.adv-list__item--no-marker{list-style:var(--adv-list-no-markers-list-style)}.adv-list--nested{list-style-type:circle;padding:var(--adv-list-nested-padding)}.adv-list--ordered{list-style-type:decimal}.adv-paragraph{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-paragraph *,.adv-paragraph *:before,.adv-paragraph *:after{box-sizing:border-box}.adv-paragraph{margin-bottom:0;margin-top:0}.adv-paragraph:not(:first-child){margin-top:var(--adv-spacing-16)}.adv-section-box{background-color:var(--adv-section-background-color);border-radius:var(--adv-section-border-radius);margin:var(--adv-section-margin);padding:var(--adv-section-padding)}.adv-accordion__item{border-bottom:var(--adv-accordion-item-border-width) solid var(--adv-accordion-between-items-border-color);border-top:var(--adv-accordion-item-border-width) solid var(--adv-accordion-item-border-color);position:relative}.adv-accordion__item:last-child{border-bottom-color:var(--adv-accordion-item-border-color)}.adv-accordion__item--open{overflow:visible}.adv-accordion__header{color:var(--adv-accordion-header-color);cursor:pointer;display:flex;padding:var(--adv-accordion-header-padding);transition-duration:var(--adv-accordion-transition-duration);transition-property:var(--adv-accordion-transition-property)}.adv-accordion__header:hover{background-color:var(--adv-accordion-header-hover-background-color)}.adv-accordion__header:active{background-color:var(--adv-accordion-header-active-background-color)}.adv-accordion__header:focus{box-shadow:0 0 0 var(--adv-focus-ring-distance) var(--adv-focus-ring-background-color),0 0 0 var(--adv-focus-ring-width) var(--adv-focus-ring-color);transition:var(--adv-focus-ring-transition-duration) var(--adv-focus-ring-timing-function);transition-property:box-shadow;outline:none}.adv-accordion__title-wrapper{flex:1}.adv-accordion__title{color:var(--adv-accordion-title-color);font-weight:var(--adv-accordion-header-font-weight)}.adv-accordion__toggle{line-height:1;margin:var(--adv-accordion-toggle-margin);padding:var(--adv-accordion-toggle-padding);width:var(--adv-accordion-toggle-width)}.adv-accordion__content{box-sizing:border-box;margin:var(--adv-accordion-content-margin);overflow-x:auto;overflow-y:hidden;padding:var(--adv-accordion-content-padding);transition-duration:var(--adv-accordion-transition-duration);transition-property:var(--adv-accordion-transition-property)}.adv-accordion__item>.adv-accordion__content{margin:var(--adv-accordion-content-closed-margin)}.adv-accordion__item--open>.adv-accordion__content{margin:var(--adv-accordion-content-margin)}.adv-accordion--max-height-transition .adv-accordion__item>.adv-accordion__content{max-height:0;transition-duration:var(--adv-accordion-css-animated-transition-duration);transition-property:var(--adv-accordion-css-animated-transition-property)}.adv-accordion--max-height-transition .adv-accordion__item--open>.adv-accordion__content{max-height:var(--adv-accordion-css-animated-max-height)}.adv-collapsible-container{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-collapsible-container *,.adv-collapsible-container *:before,.adv-collapsible-container *:after{box-sizing:border-box}.adv-collapsible-container{overflow:hidden;transition:height var(--adv-accordion-transition-duration) var(--adv-accordion-transition-function)}.adv-icon{display:inline-block;fill:var(--adv-icon-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:400;line-height:1;position:relative;speak:none;text-transform:none;vertical-align:baseline}.adv-table{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-table *,.adv-table *:before,.adv-table *:after{box-sizing:border-box}.adv-table{border:var(--adv-table-border);border-collapse:collapse;border-spacing:0;line-height:var(--adv-table-line-height);margin:var(--adv-table-margin);padding:var(--adv-table-padding);text-align:left;width:var(--adv-table-width)}.adv-table--condensed .adv-table__cell{font-size:var(--adv-table-condensed-font-size);padding:var(--adv-table-condensed-cell-padding)}.adv-table__row{vertical-align:var(--adv-table-vertical-align);border-bottom:var(--adv-table-row-border)}.adv-table__row--changed{background-color:var(--adv-table-row-changed-background-color)}.adv-table__body{vertical-align:var(--adv-table-vertical-align)}.adv-table__body .adv-table__row:hover{background-color:var(--adv-table-row-changed-background-color)}.adv-table__cell{border-left:var(--adv-border-width) solid transparent;border-right:var(--adv-border-width) solid transparent;overflow:auto;padding:var(--adv-table-cell-padding);text-align:var(--adv-table-cell-text-align);vertical-align:inherit}.adv-table__cell:first-child,.adv-table__cell--first-column{padding-left:var(--adv-table-first-column-padding-left)}
2830
+ .adyen-kyc-tos-signed-alert:last-of-type {
2831
+ margin-top: var(--adyen-internal-spacer-070);
2665
2832
  }
2666
2833
 
2667
- .adyen-kyc-header-right {
2668
- align-items: flex-end;
2669
- text-align: right;
2834
+ .adyen-kyc-tos-container {
2835
+ height: 100%;
2670
2836
  }
2671
2837
 
2672
- .adyen-kyc-header-content {
2838
+ .adyen-kyc-tos-content {
2673
2839
  display: flex;
2674
2840
  flex-direction: column;
2675
- gap: var(--adyen-internal-spacer-040);
2676
- }
2677
-
2678
- .adyen-kyc-header-actions {
2679
- max-width: 300px;
2680
- }
2681
-
2682
- .adyen-kyc-header-title {
2683
- color: var(--adyen-internal-color-label-primary);
2684
- margin: 0;
2685
- }
2841
+ padding: var(--adyen-internal-spacer-070);
2686
2842
 
2687
- .adyen-kyc-header-title-primary {
2688
- font-size: var(--adyen-internal-text-title-l-font-size);
2689
- font-family: var(--adyen-internal-text-title-l-font-family);
2690
- font-weight: var(--adyen-internal-text-title-l-font-weight);
2691
- line-height: var(--adyen-internal-text-title-l-line-height);
2843
+ @container main (min-width:480px) {
2844
+ flex-direction: row;
2845
+ }
2692
2846
  }
2693
2847
 
2694
- .adyen-kyc-header-title-secondary {
2695
- font-size: var(--adyen-internal-text-title-font-size);
2696
- font-family: var(--adyen-internal-text-title-font-family);
2697
- font-weight: var(--adyen-internal-text-title-font-weight);
2698
- }
2848
+ .adyen-kyc-tos-signer-field {
2849
+ width: 100%;
2699
2850
 
2700
- .adyen-kyc-header-description {
2701
- font-size: var(--adyen-internal-text-body-font-size);
2702
- font-family: var(--adyen-internal-text-body-font-family);
2703
- font-weight: var(--adyen-internal-text-body-font-weight);
2704
- line-height: var(--adyen-internal-text-body-line-height);
2851
+ @container main (min-width: 680px) {
2852
+ width: 50%;
2853
+ }
2705
2854
  }
2706
2855
 
2707
- .adyen-kyc-header-description-primary {
2708
- color: var(--adyen-internal-color-label-primary);
2709
- }
2856
+ .adyen-kyc-tos-actions {
2857
+ display: flex;
2858
+ justify-content: space-between;
2859
+ align-items: center;
2860
+ gap: var(--adyen-internal-spacer-040);
2861
+ padding: var(--adyen-internal-spacer-070);
2710
2862
 
2711
- .adyen-kyc-header-description-secondary {
2712
- color: var(--adyen-internal-color-label-secondary);
2863
+ &:has(> :only-child) {
2864
+ justify-content: flex-end;
2865
+ }
2713
2866
  }
2714
2867
  .adyen-kyc-list {
2715
2868
  display: flex;
@@ -3329,7 +3482,12 @@ fieldset {
3329
3482
  color: var(--adyen-internal-color-label-secondary, #5c6874);
3330
3483
  font-size: var(--adyen-internal-text-body-font-size, 14px);
3331
3484
  font-weight: var(--adyen-internal-text-body-font-weight, 400);
3332
- }.adyen-kyc-mismatch {
3485
+ }.adyen-kyc-summary-header {
3486
+ display: flex;
3487
+ justify-content: space-between;
3488
+ align-items: center;
3489
+ }
3490
+ .adyen-kyc-mismatch {
3333
3491
  animation: adyen-kyc-mismatchShake 300ms;
3334
3492
  border-color: var(--adyen-internal-color-outline-critical, #dc3801) !important;
3335
3493
  }
@@ -3421,112 +3579,22 @@ fieldset {
3421
3579
  .adyen-kyc-document-guidance__description {
3422
3580
  display: flex;
3423
3581
  gap: var(--adyen-internal-spacer-040, 8px);
3424
- margin-top: var(--adyen-internal-spacer-010, 2px);
3425
- color: var(--adyen-internal-color-label-on-color, #ffffff);
3426
- }
3427
-
3428
- .adyen-kyc-document-guidance__description-text {
3429
- color: var(--adyen-internal-color-label-primary, #001222);
3430
- }
3431
-
3432
- .adyen-kyc-document-guidance__icon {
3433
- height: 16px;
3434
- width: 16px;
3435
- border-radius: 50%;
3436
- background-color: var(--adyen-internal-color-background-success-strong, #008845);
3437
- }
3438
- .adyen-kyc-document-guidance__icon--invalid {
3439
- background-color: var(--adyen-internal-color-background-critical-strong, #dc3801);
3440
- }.adyen-kyc-dropzone {
3441
- border: var(--adyen-internal-border-width-s, 1px) dashed var(--adyen-internal-color-outline-secondary, #c8ccd0);
3442
- border-radius: var(--adyen-internal-border-radius-m, 8px);
3443
- display: flex;
3444
- flex-direction: column;
3445
- padding: var(--adyen-internal-spacer-080, 20px) var(--adyen-internal-spacer-090, 24px);
3446
- min-height: 70px;
3447
- transition: all 0.2s ease-out;
3448
- margin-top: var(--adyen-internal-spacer-040, 8px);
3449
- }
3450
- .adyen-kyc-dropzone--dragged {
3451
- border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-secondary-active, #001222);
3452
- box-shadow: var(--adyen-internal-shadow-medium, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04));
3453
- }
3454
- .adyen-kyc-dropzone--error {
3455
- border: var(--adyen-internal-border-width-s, 1px) dashed var(--adyen-internal-color-outline-critical, #dc3801);
3456
- }
3457
- .adyen-kyc-dropzone__icon {
3458
- display: flex;
3459
- align-items: center;
3460
- justify-content: center;
3461
- background-color: var(--adyen-internal-color-background-secondary, #f4f5f6);
3462
- border-radius: 50%;
3463
- height: 32px;
3464
- width: 32px;
3465
- margin: var(--adyen-internal-spacer-000, 0px) auto var(--adyen-internal-spacer-060, 12px);
3466
- }
3467
- .adyen-kyc-dropzone__labels h4 {
3468
- margin-bottom: var(--adyen-internal-spacer-020, 4px);
3469
- }
3470
- .adyen-kyc-dropzone__labels {
3471
- display: flex;
3472
- flex-direction: column;
3473
- margin-bottom: var(--adyen-internal-spacer-060, 12px);
3474
- text-align: center;
3475
- }
3476
- .adyen-kyc-dropzone__input {
3477
- display: none;
3478
- }
3479
- .adyen-kyc-dropzone__button {
3480
- text-align: center;
3481
- }
3482
- .adyen-kyc-dropzone__extras {
3483
- margin-top: var(--adyen-internal-spacer-040, 8px);
3484
- }.adyen-kyc-dropzone-file {
3485
- display: flex;
3486
- align-items: center;
3487
- justify-content: space-between;
3488
- background: var(--adyen-internal-color-background-secondary, #f4f5f6);
3489
- border-radius: var(--adyen-internal-border-radius-m, 8px);
3490
- margin-bottom: var(--adyen-internal-spacer-070, 16px);
3491
- padding: var(--adyen-internal-spacer-060, 12px) var(--adyen-internal-spacer-070, 16px);
3492
- width: 100%;
3493
- margin-top: var(--adyen-internal-spacer-040, 8px);
3494
- }
3495
- .adyen-kyc-dropzone-file--error {
3496
- background-color: var(--adyen-internal-color-background-critical-weak, #fff3ef);
3497
- }
3498
- .adyen-kyc-dropzone-file--error .adyen-kyc-dropzone-file__icon {
3499
- color: var(--adyen-internal-color-background-critical-strong, #dc3801);
3500
- }
3501
- .adyen-kyc-dropzone-file__icon {
3502
- align-items: center;
3503
- display: flex;
3504
- margin-right: var(--adyen-internal-spacer-040, 8px);
3505
- color: var(--adyen-internal-color-background-success-strong, #008845);
3506
- }
3507
- .adyen-kyc-dropzone-file__labels {
3508
- overflow: hidden;
3509
- display: flex;
3510
- align-items: center;
3511
- }
3512
- .adyen-kyc-dropzone-file__name {
3513
- overflow: hidden;
3514
- text-overflow: ellipsis;
3515
- white-space: nowrap;
3516
- max-width: 600px;
3582
+ margin-top: var(--adyen-internal-spacer-010, 2px);
3583
+ color: var(--adyen-internal-color-label-on-color, #ffffff);
3517
3584
  }
3518
- .adyen-kyc-dropzone-file__size {
3519
- margin-left: var(--adyen-internal-spacer-040, 8px);
3585
+
3586
+ .adyen-kyc-document-guidance__description-text {
3587
+ color: var(--adyen-internal-color-label-primary, #001222);
3520
3588
  }
3521
- .adyen-kyc-dropzone-file__error {
3522
- color: var(--adyen-internal-color-label-critical, #dc3801);
3523
- margin-top: var(--adyen-internal-spacer-020, 4px);
3589
+
3590
+ .adyen-kyc-document-guidance__icon {
3591
+ height: 16px;
3592
+ width: 16px;
3593
+ border-radius: 50%;
3594
+ background-color: var(--adyen-internal-color-background-success-strong, #008845);
3524
3595
  }
3525
- .adyen-kyc-dropzone-file__button {
3526
- border: 0;
3527
- padding: var(--adyen-internal-spacer-000, 0px);
3528
- }.adyen-kyc-description-field {
3529
- padding: var(--adyen-internal-spacer-080, 20px) 0;
3596
+ .adyen-kyc-document-guidance__icon--invalid {
3597
+ background-color: var(--adyen-internal-color-background-critical-strong, #dc3801);
3530
3598
  }.adyen-kyc-tile-container {
3531
3599
  width: 100%;
3532
3600
  }
@@ -3660,6 +3728,96 @@ fieldset {
3660
3728
 
3661
3729
  .adyen-kyc-options {
3662
3730
  margin-top: var(--adyen-internal-spacer-080, 20px);
3731
+ }.adyen-kyc-dropzone {
3732
+ border: var(--adyen-internal-border-width-s, 1px) dashed var(--adyen-internal-color-outline-secondary, #c8ccd0);
3733
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
3734
+ display: flex;
3735
+ flex-direction: column;
3736
+ padding: var(--adyen-internal-spacer-080, 20px) var(--adyen-internal-spacer-090, 24px);
3737
+ min-height: 70px;
3738
+ transition: all 0.2s ease-out;
3739
+ margin-top: var(--adyen-internal-spacer-040, 8px);
3740
+ }
3741
+ .adyen-kyc-dropzone--dragged {
3742
+ border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-secondary-active, #001222);
3743
+ box-shadow: var(--adyen-internal-shadow-medium, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04));
3744
+ }
3745
+ .adyen-kyc-dropzone--error {
3746
+ border: var(--adyen-internal-border-width-s, 1px) dashed var(--adyen-internal-color-outline-critical, #dc3801);
3747
+ }
3748
+ .adyen-kyc-dropzone__icon {
3749
+ display: flex;
3750
+ align-items: center;
3751
+ justify-content: center;
3752
+ background-color: var(--adyen-internal-color-background-secondary, #f4f5f6);
3753
+ border-radius: 50%;
3754
+ height: 32px;
3755
+ width: 32px;
3756
+ margin: var(--adyen-internal-spacer-000, 0px) auto var(--adyen-internal-spacer-060, 12px);
3757
+ }
3758
+ .adyen-kyc-dropzone__labels h4 {
3759
+ margin-bottom: var(--adyen-internal-spacer-020, 4px);
3760
+ }
3761
+ .adyen-kyc-dropzone__labels {
3762
+ display: flex;
3763
+ flex-direction: column;
3764
+ margin-bottom: var(--adyen-internal-spacer-060, 12px);
3765
+ text-align: center;
3766
+ }
3767
+ .adyen-kyc-dropzone__input {
3768
+ display: none;
3769
+ }
3770
+ .adyen-kyc-dropzone__button {
3771
+ text-align: center;
3772
+ }
3773
+ .adyen-kyc-dropzone__extras {
3774
+ margin-top: var(--adyen-internal-spacer-040, 8px);
3775
+ }.adyen-kyc-dropzone-file {
3776
+ display: flex;
3777
+ align-items: center;
3778
+ justify-content: space-between;
3779
+ background: var(--adyen-internal-color-background-secondary, #f4f5f6);
3780
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
3781
+ margin-bottom: var(--adyen-internal-spacer-070, 16px);
3782
+ padding: var(--adyen-internal-spacer-060, 12px) var(--adyen-internal-spacer-070, 16px);
3783
+ width: 100%;
3784
+ margin-top: var(--adyen-internal-spacer-040, 8px);
3785
+ }
3786
+ .adyen-kyc-dropzone-file--error {
3787
+ background-color: var(--adyen-internal-color-background-critical-weak, #fff3ef);
3788
+ }
3789
+ .adyen-kyc-dropzone-file--error .adyen-kyc-dropzone-file__icon {
3790
+ color: var(--adyen-internal-color-background-critical-strong, #dc3801);
3791
+ }
3792
+ .adyen-kyc-dropzone-file__icon {
3793
+ align-items: center;
3794
+ display: flex;
3795
+ margin-right: var(--adyen-internal-spacer-040, 8px);
3796
+ color: var(--adyen-internal-color-background-success-strong, #008845);
3797
+ }
3798
+ .adyen-kyc-dropzone-file__labels {
3799
+ overflow: hidden;
3800
+ display: flex;
3801
+ align-items: center;
3802
+ }
3803
+ .adyen-kyc-dropzone-file__name {
3804
+ overflow: hidden;
3805
+ text-overflow: ellipsis;
3806
+ white-space: nowrap;
3807
+ max-width: 600px;
3808
+ }
3809
+ .adyen-kyc-dropzone-file__size {
3810
+ margin-left: var(--adyen-internal-spacer-040, 8px);
3811
+ }
3812
+ .adyen-kyc-dropzone-file__error {
3813
+ color: var(--adyen-internal-color-label-critical, #dc3801);
3814
+ margin-top: var(--adyen-internal-spacer-020, 4px);
3815
+ }
3816
+ .adyen-kyc-dropzone-file__button {
3817
+ border: 0;
3818
+ padding: var(--adyen-internal-spacer-000, 0px);
3819
+ }.adyen-kyc-description-field {
3820
+ padding: var(--adyen-internal-spacer-080, 20px) 0;
3663
3821
  }.adyen-kyc-landing-layout-image {
3664
3822
  margin: 0 auto;
3665
3823
  }
@@ -3954,95 +4112,7 @@ fieldset {
3954
4112
  flex-flow: row-reverse;
3955
4113
  justify-content: space-between;
3956
4114
  }
3957
- }.adyen-kyc-card {
3958
- all: unset;
3959
- display: block;
3960
- width: 100%;
3961
- box-sizing: border-box;
3962
- border-radius: var(--adyen-internal-border-radius-l);
3963
- transition: 200ms;
3964
- border: 1px solid transparent;
3965
- overflow: hidden;
3966
- }
3967
-
3968
- .adyen-kyc-card-primary {
3969
- background-color: var(--adyen-internal-color-background-primary);
3970
- border-color: var(--adyen-internal-color-outline-primary);
3971
- }
3972
-
3973
- .adyen-kyc-card-secondary {
3974
- background-color: var(--adyen-internal-color-background-secondary);
3975
- }
3976
-
3977
- .adyen-kyc-card-padding-small {
3978
- padding: var(--adyen-internal-spacer-040);
3979
- }
3980
-
3981
- .adyen-kyc-card-padding-medium {
3982
- padding: var(--adyen-internal-spacer-070);
3983
- }
3984
-
3985
- .adyen-kyc-card-padding-large {
3986
- padding: var(--adyen-internal-spacer-090);
3987
- }
3988
-
3989
- .adyen-kyc-card-elevation-low {
3990
- box-shadow: var(--adyen-internal-shadow-low);
3991
- }
3992
-
3993
- .adyen-kyc-card-elevation-medium {
3994
- box-shadow: var(--adyen-internal-shadow-low), var(--adyen-internal-shadow-medium);
3995
- }
3996
-
3997
- .adyen-kyc-card-elevation-high {
3998
- box-shadow: var(--adyen-internal-shadow-low), var(--adyen-internal-shadow-high);
3999
- }
4000
-
4001
- .adyen-kyc-card-interactive {
4002
- cursor: pointer;
4003
- outline-offset: calc(1px + var(--adyen-internal-focus-ring-spacer));
4004
- outline: var(--adyen-internal-focus-ring-outline) solid transparent;
4005
- }
4006
-
4007
- .adyen-kyc-card-interactive:disabled {
4008
- background-color: var(--adyen-internal-color-background-disabled);
4009
- box-shadow: none;
4010
- border-color: transparent;
4011
- color: var(--adyen-internal-color-label-disabled);
4012
- cursor: default;
4013
- }
4014
-
4015
- @media (hover: hover) {
4016
- .adyen-kyc-card-interactive.adyen-kyc-card-primary:hover:not(.adyen-kyc-card-interactive:disabled) {
4017
- background-color: var(--adyen-internal-color-background-primary-hover);
4018
- }
4019
-
4020
- .adyen-kyc-card-interactive.adyen-kyc-card-secondary:hover:not(.adyen-kyc-card-interactive:disabled) {
4021
- background-color: var(--adyen-internal-color-background-secondary-hover);
4022
- }
4023
- }
4024
-
4025
- .adyen-kyc-card-interactive:focus-visible {
4026
- outline-color: var(--adyen-internal-focus-ring-color);
4027
- }
4028
-
4029
- .adyen-kyc-card-interactive.adyen-kyc-card-primary:active:not(.adyen-kyc-card-interactive:disabled) {
4030
- background-color: var(--adyen-internal-color-background-primary-active);
4031
- }
4032
-
4033
- .adyen-kyc-card-interactive.adyen-kyc-card-secondary:active:not(.adyen-kyc-card-interactive:disabled) {
4034
- background-color: var(--adyen-internal-color-background-secondary-active);
4035
- }
4036
-
4037
- .adyen-kyc-card-interactive.adyen-kyc-card-selected {
4038
- pointer-events: none;
4039
- }
4040
-
4041
- .adyen-kyc-card-selected {
4042
- outline-offset: -1px;
4043
- outline: 2px solid var(--adyen-internal-color-outline-primary-active);
4044
- }
4045
- /* for container queries */
4115
+ }/* for container queries */
4046
4116
  .adyen-kyc-radio-group-card {
4047
4117
  display: flex;
4048
4118
  flex-direction: column;
@@ -4910,58 +4980,9 @@ input.adyen-kyc-radio-group-card__radio--floating {
4910
4980
  font-size: var(--adyen-internal-text-body-font-size, 14px);
4911
4981
  line-height: var(--adyen-internal-text-body-line-height, 20px);
4912
4982
  margin: var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-060, 12px) var(--adyen-internal-spacer-000, 0px);
4913
- }/* for container queries */
4914
- .adyen-kyc-dropin {
4915
- background: var(--adyen-internal-color-background-primary, #ffffff);
4916
- display: flex;
4917
- flex-direction: column;
4918
- height: 100%;
4919
- overflow: hidden;
4920
- position: relative;
4921
- width: 100%;
4922
- }
4923
- .adyen-kyc-dropin-container {
4924
- position: relative;
4925
- min-height: 480px;
4926
- transform: scale(1);
4927
- width: 100%;
4928
- }
4929
-
4930
- .adyen-kyc-dropin__content {
4931
- display: flex;
4932
- flex: 1;
4933
- flex-direction: column;
4934
- height: calc(100% - 56px);
4935
- overflow: auto;
4936
- }
4937
- @container main (min-width: 680px) and (max-width: 1024px) {
4938
- .adyen-kyc-dropin__content {
4939
- height: calc(100% - 72px);
4940
- }
4941
- }
4942
-
4943
- /* padding in dropins, not used in modal view */
4944
- .adyen-kyc-dropin__content-main {
4945
- display: flex;
4946
- flex: 1;
4947
- padding: var(--adyen-internal-spacer-070, 16px);
4948
- width: 100%;
4949
- box-sizing: border-box;
4950
- }
4951
- @container main (min-width: 680px) and (max-width: 1024px) {
4952
- .adyen-kyc-dropin__content-main {
4953
- padding: var(--adyen-internal-spacer-090, 24px);
4954
- }
4955
- }
4956
- @container main (min-width: 1024px) {
4957
- .adyen-kyc-dropin__content-main {
4958
- padding: var(--adyen-internal-spacer-110, 40px);
4959
- }
4960
- }
4961
-
4962
- .adyen-kyc-dropin__main {
4963
- border-radius: var(--adyen-internal-border-radius-m, 8px);
4964
- width: 100%;
4983
+ }.adyen-kyc-invited-decision-makers-container {
4984
+ max-width: 500px;
4985
+ margin: var(--adyen-internal-spacer-000, 0px) auto;
4965
4986
  }.adyen-kyc-tabs {
4966
4987
  display: flex;
4967
4988
  gap: 8px;