@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/styles-CLV89_hH.js CHANGED
@@ -511,2214 +511,2367 @@ const css = `/* for container queries */
511
511
  opacity: 1;
512
512
  }
513
513
  }
514
- .adyen-kyc-u-display-flex {
515
- display: flex !important;
514
+ .adyen-kyc-accordion,
515
+ .adyen-kyc-accordion-summary {
516
+ color: var(--adyen-internal-color-label-primary);
517
+ font-size: var(--adyen-internal-text-body-font-size);
518
+ font-family: var(--adyen-internal-text-body-font-family);
519
+ line-height: var(--adyen-internal-text-body-line-height);
520
+ cursor: pointer;
516
521
  }
517
522
 
518
- .adyen-kyc-u-display-inline-flex {
519
- display: inline-flex !important;
523
+ .adyen-kyc-accordion {
524
+ background: none;
525
+ border-radius: var(--adyen-internal-border-radius-l);
526
+ margin-bottom: var(--adyen-internal-spacer-050);
520
527
  }
521
528
 
522
- .adyen-kyc-u-flex-direction-row {
523
- flex-direction: row !important;
529
+ .adyen-kyc-accordion-basic {
530
+ background-color: var(--adyen-internal-color-background-secondary);
524
531
  }
525
-
526
- .adyen-kyc-u-flex-direction-row-reverse {
527
- flex-direction: row-reverse !important;
532
+ .adyen-kyc-accordion-info {
533
+ background-color: var(--adyen-internal-color-background-highlight-weak);
528
534
  }
529
-
530
- .adyen-kyc-u-flex-direction-column {
531
- flex-direction: column !important;
535
+ .adyen-kyc-accordion-error {
536
+ background-color: var(--adyen-internal-color-background-critical-weak);
532
537
  }
533
-
534
- .adyen-kyc-u-flex-direction-column-reverse {
535
- flex-direction: column-reverse !important;
538
+ .adyen-kyc-accordion-warning {
539
+ background-color: var(--adyen-internal-color-background-warning-weak);
536
540
  }
537
-
538
- .adyen-kyc-u-flex-wrap-wrap {
539
- flex-wrap: wrap !important;
541
+ .adyen-kyc-accordion-success {
542
+ background-color: var(--adyen-internal-color-background-success-weak);
540
543
  }
541
-
542
- .adyen-kyc-u-flex-wrap-nowrap {
543
- flex-wrap: nowrap !important;
544
+ .adyen-kyc-accordion-narrow .adyen-kyc-accordion-summary {
545
+ padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-070);
544
546
  }
545
-
546
- .adyen-kyc-u-align-items-start {
547
- align-items: start !important;
547
+ .adyen-kyc-accordion-narrow .adyen-kyc-accordion-content {
548
+ padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-070)
549
+ var(--adyen-internal-spacer-060);
548
550
  }
549
-
550
- .adyen-kyc-u-align-items-flex-start {
551
- align-items: flex-start !important;
551
+ .adyen-kyc-accordion-with-icon .adyen-kyc-accordion-content {
552
+ margin-left: var(--adyen-internal-spacer-080);
552
553
  }
553
554
 
554
- .adyen-kyc-u-align-items-flex-end {
555
- align-items: flex-end !important;
555
+ .adyen-kyc-accordion-summary {
556
+ display: flex;
557
+ align-items: center;
558
+ gap: var(--adyen-internal-spacer-050);
559
+ padding: var(--adyen-internal-spacer-080);
560
+ font-weight: var(--adyen-internal-text-title-font-weight);
561
+ transition: margin 150ms ease-out;
562
+ margin-bottom: var(--adyen-internal-spacer-000);
563
+ border-radius: var(--adyen-internal-border-radius-l);
556
564
  }
557
565
 
558
- .adyen-kyc-u-align-items-center {
559
- align-items: center !important;
566
+ .adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow {
567
+ cursor: pointer;
568
+ user-select: none;
569
+ height: 1em;
560
570
  }
561
571
 
562
- .adyen-kyc-u-align-items-stretch {
563
- align-items: stretch !important;
572
+ .adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow-right {
573
+ margin-left: auto;
574
+ margin-right: var(--adyen-internal-spacer-050);
564
575
  }
565
576
 
566
- .adyen-kyc-u-align-items-baseline {
567
- align-items: baseline !important;
577
+ .adyen-kyc-accordion[open] .adyen-kyc-accordion-arrow {
578
+ transform: rotate(-180deg);
568
579
  }
569
-
570
- .adyen-kyc-u-align-items-end {
571
- align-items: end !important;
580
+ .adyen-kyc-accordion summary::-webkit-details-marker {
581
+ display: none;
572
582
  }
573
583
 
574
- .adyen-kyc-u-justify-content-center {
575
- justify-content: center !important;
584
+ .adyen-kyc-accordion-content {
585
+ cursor: auto;
586
+ padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-080)
587
+ var(--adyen-internal-spacer-080);
588
+ user-select: none;
589
+ display: flex;
590
+ flex-direction: column;
591
+ gap: var(--adyen-internal-spacer-040);
576
592
  }
577
593
 
578
- .adyen-kyc-u-justify-content-flex-start {
579
- justify-content: flex-start !important;
594
+ .adyen-kyc-accordion[open] summary {
595
+ margin-bottom: var(--adyen-internal-spacer-020);
596
+ user-select: auto;
580
597
  }
581
-
582
- .adyen-kyc-u-justify-content-flex-end {
583
- justify-content: flex-end !important;
598
+ .adyen-kyc-alert {
599
+ border-radius: var(--adyen-internal-border-radius-m);
600
+ padding: var(--adyen-internal-spacer-070);
601
+ word-break: break-word;
602
+ display: flex;
603
+ flex-direction: column;
604
+ gap: var(--adyen-internal-spacer-040);
605
+ text-align: left;
584
606
  }
585
-
586
- .adyen-kyc-u-justify-content-start {
587
- justify-content: start !important;
607
+ .adyen-kyc-alert-without-icon .adyen-kyc-alert-explanation,
608
+ .adyen-kyc-alert-without-icon .adyen-kyc-alert-actions {
609
+ margin: 0 var(--adyen-internal-spacer-070);
588
610
  }
589
611
 
590
- .adyen-kyc-u-justify-content-end {
591
- justify-content: end !important;
612
+ .adyen-kyc-alert-basic {
613
+ background-color: var(--adyen-internal-color-background-secondary);
592
614
  }
593
615
 
594
- .adyen-kyc-u-justify-content-left {
595
- justify-content: left !important;
616
+ .adyen-kyc-alert-info {
617
+ background-color: var(--adyen-internal-color-background-highlight-weak);
596
618
  }
597
619
 
598
- .adyen-kyc-u-justify-content-right {
599
- justify-content: right !important;
620
+ .adyen-kyc-alert-error {
621
+ background-color: var(--adyen-internal-color-background-critical-weak);
600
622
  }
601
623
 
602
- .adyen-kyc-u-justify-content-space-between {
603
- justify-content: space-between !important;
624
+ .adyen-kyc-alert-warning {
625
+ background-color: var(--adyen-internal-color-background-warning-weak);
604
626
  }
605
627
 
606
- .adyen-kyc-u-justify-content-space-around {
607
- justify-content: space-around !important;
628
+ .adyen-kyc-alert-success {
629
+ background-color: var(--adyen-internal-color-background-success-weak);
608
630
  }
609
631
 
610
- .adyen-kyc-u-justify-content-space-evenly {
611
- justify-content: space-evenly !important;
632
+ .adyen-kyc-alert-header {
633
+ align-items: flex-start;
634
+ display: flex;
612
635
  }
613
636
 
614
- .adyen-kyc-u-justify-content-stretch {
615
- justify-content: stretch !important;
637
+ .adyen-kyc-alert-header-without-children {
638
+ align-items: center;
616
639
  }
617
640
 
618
- .adyen-kyc-u-flex-1 {
619
- flex: 1 !important;
641
+ .adyen-kyc-alert-icon {
642
+ line-height: var(--adyen-internal-text-body-line-height);
643
+ margin-top: var(--adyen-internal-spacer-010);
620
644
  }
621
-
622
- .adyen-kyc-u-flex-2 {
623
- flex: 2 !important;
645
+ .adyen-kyc-alert-icon-info {
646
+ color: var(--adyen-internal-color-background-highlight-strong);
624
647
  }
625
648
 
626
- .adyen-kyc-u-flex-3 {
627
- flex: 3 !important;
649
+ .adyen-kyc-alert-icon-error {
650
+ color: var(--adyen-internal-color-background-critical-strong);
628
651
  }
629
652
 
630
- .adyen-kyc-u-flex-4 {
631
- flex: 4 !important;
653
+ .adyen-kyc-alert-icon-warning {
654
+ color: var(--adyen-internal-color-background-warning-strong);
632
655
  }
633
656
 
634
- .adyen-kyc-u-margin-auto {
635
- margin: auto !important;
657
+ .adyen-kyc-alert-icon-success {
658
+ color: var(--adyen-internal-color-background-success-strong);
636
659
  }
637
660
 
638
- .adyen-kyc-u-margin-bottom-auto {
639
- margin-bottom: auto !important;
661
+ .adyen-kyc-alert-title {
662
+ flex-grow: 1;
663
+ margin-left: var(--adyen-internal-spacer-070);
640
664
  }
641
665
 
642
- .adyen-kyc-u-margin-left-auto {
643
- margin-left: auto !important;
666
+ .adyen-kyc-alert-explanation {
667
+ color: var(--adyen-internal-color-label-primary);
668
+ font-size: var(--adyen-internal-text-body-font-size);
669
+ margin: 0 var(--adyen-internal-spacer-100);
644
670
  }
645
671
 
646
- .adyen-kyc-u-margin-right-auto {
647
- margin-right: auto !important;
672
+ .adyen-kyc-alert-actions {
673
+ display: flex;
674
+ gap: var(--adyen-internal-spacer-070);
675
+ text-align: left;
648
676
  }
649
-
650
- .adyen-kyc-u-margin-top-auto {
651
- margin-top: auto !important;
677
+ /* for container queries */
678
+ .adyen-kyc-stack-layout {
679
+ display: flex;
680
+ flex-direction: column;
652
681
  }
653
682
 
654
- .adyen-kyc-u-margin-x-auto {
655
- margin-left: auto !important;
656
- margin-right: auto !important;
683
+ .adyen-kyc-stack-layout-gap-xs {
684
+ gap: var(--adyen-internal-spacer-020);
657
685
  }
658
686
 
659
- .adyen-kyc-u-margin-y-auto {
660
- margin-bottom: auto !important;
661
- margin-top: auto !important;
687
+ .adyen-kyc-stack-layout-gap-s {
688
+ gap: var(--adyen-internal-spacer-040);
662
689
  }
663
690
 
664
- .adyen-kyc-u-margin-0 {
665
- margin: var(--adyen-internal-spacer-000, 0px) !important;
691
+ .adyen-kyc-stack-layout-gap-m {
692
+ gap: var(--adyen-internal-spacer-070);
666
693
  }
667
694
 
668
- .adyen-kyc-u-margin-bottom-0 {
669
- margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;
695
+ .adyen-kyc-stack-layout-gap-l {
696
+ gap: var(--adyen-internal-spacer-100);
670
697
  }
671
698
 
672
- .adyen-kyc-u-margin-left-0 {
673
- margin-left: var(--adyen-internal-spacer-000, 0px) !important;
699
+ .adyen-kyc-stack-layout-gap-xl {
700
+ gap: var(--adyen-internal-spacer-140);
674
701
  }
675
702
 
676
- .adyen-kyc-u-margin-right-0 {
677
- margin-right: var(--adyen-internal-spacer-000, 0px) !important;
703
+ .adyen-kyc-stack-layout-left {
704
+ align-items: flex-start;
678
705
  }
679
706
 
680
- .adyen-kyc-u-margin-top-0 {
681
- margin-top: var(--adyen-internal-spacer-000, 0px) !important;
707
+ .adyen-kyc-stack-layout-center {
708
+ align-items: center;
682
709
  }
683
710
 
684
- .adyen-kyc-u-margin-x-0 {
685
- margin-left: var(--adyen-internal-spacer-000, 0px) !important;
686
- margin-right: var(--adyen-internal-spacer-000, 0px) !important;
711
+ .adyen-kyc-stack-layout-right {
712
+ align-items: flex-end;
687
713
  }
688
714
 
689
- .adyen-kyc-u-margin-y-0 {
690
- margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;
691
- margin-top: var(--adyen-internal-spacer-000, 0px) !important;
715
+ .adyen-kyc-stack-layout-item {
716
+ flex-grow: 1;
717
+ width: 100%;
692
718
  }
693
719
 
694
- .adyen-kyc-u-margin-2 {
695
- margin: var(--adyen-internal-spacer-010, 2px) !important;
720
+ @container main (min-width: 480px) {
721
+ .adyen-kyc-stack-layout-horizontal {
722
+ align-items: flex-start;
723
+ flex-direction: row;
724
+ }
725
+ .adyen-kyc-stack-layout-left-horizontal {
726
+ justify-content: flex-start;
727
+ }
728
+ .adyen-kyc-stack-layout-center-horizontal {
729
+ justify-content: center;
730
+ }
731
+ .adyen-kyc-stack-layout-right-horizontal {
732
+ justify-content: flex-end;
733
+ }
734
+ }/* for container queries */
735
+ .adyen-kyc-status {
736
+ align-items: center;
737
+ border-radius: var(--adyen-internal-border-radius-xl);
738
+ display: inline-flex;
739
+ padding: var(--adyen-internal-spacer-020);
696
740
  }
697
741
 
698
- .adyen-kyc-u-margin-bottom-2 {
699
- margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;
742
+ .adyen-kyc-status-icon {
743
+ height: 18px;
744
+ width: 18px;
745
+ padding: 1px;
700
746
  }
701
747
 
702
- .adyen-kyc-u-margin-left-2 {
703
- margin-left: var(--adyen-internal-spacer-010, 2px) !important;
748
+ .adyen-kyc-status-icon svg {
749
+ height: 16px;
750
+ width: 16px;
704
751
  }
705
752
 
706
- .adyen-kyc-u-margin-right-2 {
707
- margin-right: var(--adyen-internal-spacer-010, 2px) !important;
753
+ .adyen-kyc-status-text {
754
+ font-size: var(--adyen-internal-text-caption-font-size);
755
+ font-weight: var(--adyen-internal-text-caption-stronger-font-weight);
756
+ line-height: var(--adyen-internal-text-caption-line-height);
757
+ padding-left: var(--adyen-internal-spacer-020);
758
+ padding-right: var(--adyen-internal-spacer-020);
708
759
  }
709
760
 
710
- .adyen-kyc-u-margin-top-2 {
711
- margin-top: var(--adyen-internal-spacer-010, 2px) !important;
761
+ @container main (max-width: 480px) {
762
+ .adyen-kyc-status-text-responsive {
763
+ display: none;
764
+ }
712
765
  }
713
766
 
714
- .adyen-kyc-u-margin-x-2 {
715
- margin-left: var(--adyen-internal-spacer-010, 2px) !important;
716
- margin-right: var(--adyen-internal-spacer-010, 2px) !important;
767
+ .adyen-kyc-status-neutral {
768
+ background-color: var(--adyen-internal-color-background-secondary);
769
+ color: var(--adyen-internal-color-label-disabled);
770
+ fill: var(--adyen-internal-color-label-disabled);
717
771
  }
718
772
 
719
- .adyen-kyc-u-margin-y-2 {
720
- margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;
721
- margin-top: var(--adyen-internal-spacer-010, 2px) !important;
773
+ .adyen-kyc-status-neutral .adyen-kyc-status-text {
774
+ color: var(--adyen-internal-color-label-secondary);
722
775
  }
723
776
 
724
- .adyen-kyc-u-margin-4 {
725
- margin: var(--adyen-internal-spacer-020, 4px) !important;
777
+ .adyen-kyc-status-error {
778
+ background-color: var(--adyen-internal-color-background-secondary);
779
+ color: var(--adyen-internal-color-label-critical);
780
+ fill: var(--adyen-internal-color-label-critical);
726
781
  }
727
782
 
728
- .adyen-kyc-u-margin-bottom-4 {
729
- margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;
783
+ .adyen-kyc-status-warning {
784
+ background-color: var(--adyen-internal-color-background-warning-weak);
785
+ color: var(--adyen-internal-color-label-warning);
786
+ fill: var(--adyen-internal-color-label-warning);
730
787
  }
731
788
 
732
- .adyen-kyc-u-margin-left-4 {
733
- margin-left: var(--adyen-internal-spacer-020, 4px) !important;
789
+ .adyen-kyc-status-success {
790
+ background-color: var(--adyen-internal-color-background-success-weak);
734
791
  }
735
792
 
736
- .adyen-kyc-u-margin-right-4 {
737
- margin-right: var(--adyen-internal-spacer-020, 4px) !important;
793
+ .adyen-kyc-status-success .adyen-kyc-status-text {
794
+ color: var(--adyen-internal-color-label-primary);
738
795
  }
739
796
 
740
- .adyen-kyc-u-margin-top-4 {
741
- margin-top: var(--adyen-internal-spacer-020, 4px) !important;
797
+ .adyen-kyc-status-success .adyen-kyc-status-icon {
798
+ color: var(--adyen-internal-color-label-success);
799
+ fill: var(--adyen-internal-color-label-success);
800
+ }.adyen-kyc-header {
801
+ display: flex;
802
+ flex-direction: column;
803
+ gap: var(--adyen-internal-spacer-070);
742
804
  }
743
805
 
744
- .adyen-kyc-u-margin-x-4 {
745
- margin-left: var(--adyen-internal-spacer-020, 4px) !important;
746
- margin-right: var(--adyen-internal-spacer-020, 4px) !important;
806
+ .adyen-kyc-header-margin {
807
+ margin-bottom: var(--adyen-internal-spacer-140);
747
808
  }
748
809
 
749
- .adyen-kyc-u-margin-y-4 {
750
- margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;
751
- margin-top: var(--adyen-internal-spacer-020, 4px) !important;
810
+ .adyen-kyc-header-margin-secondary {
811
+ margin-bottom: var(--adyen-internal-spacer-100);
752
812
  }
753
813
 
754
- .adyen-kyc-u-margin-6 {
755
- margin: var(--adyen-internal-spacer-030, 6px) !important;
814
+ .adyen-kyc-header-left {
815
+ align-items: flex-start;
816
+ text-align: left;
756
817
  }
757
818
 
758
- .adyen-kyc-u-margin-bottom-6 {
759
- margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;
819
+ .adyen-kyc-header-center {
820
+ align-items: center;
821
+ text-align: center;
760
822
  }
761
823
 
762
- .adyen-kyc-u-margin-left-6 {
763
- margin-left: var(--adyen-internal-spacer-030, 6px) !important;
824
+ .adyen-kyc-header-right {
825
+ align-items: flex-end;
826
+ text-align: right;
764
827
  }
765
828
 
766
- .adyen-kyc-u-margin-right-6 {
767
- margin-right: var(--adyen-internal-spacer-030, 6px) !important;
829
+ .adyen-kyc-header-content {
830
+ display: flex;
831
+ flex-direction: column;
832
+ gap: var(--adyen-internal-spacer-040);
768
833
  }
769
834
 
770
- .adyen-kyc-u-margin-top-6 {
771
- margin-top: var(--adyen-internal-spacer-030, 6px) !important;
835
+ .adyen-kyc-header-actions {
836
+ max-width: 300px;
772
837
  }
773
838
 
774
- .adyen-kyc-u-margin-x-6 {
775
- margin-left: var(--adyen-internal-spacer-030, 6px) !important;
776
- margin-right: var(--adyen-internal-spacer-030, 6px) !important;
839
+ .adyen-kyc-header-title {
840
+ color: var(--adyen-internal-color-label-primary);
841
+ margin: 0;
777
842
  }
778
843
 
779
- .adyen-kyc-u-margin-y-6 {
780
- margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;
781
- margin-top: var(--adyen-internal-spacer-030, 6px) !important;
844
+ .adyen-kyc-header-title-primary {
845
+ font-size: var(--adyen-internal-text-title-l-font-size);
846
+ font-family: var(--adyen-internal-text-title-l-font-family);
847
+ font-weight: var(--adyen-internal-text-title-l-font-weight);
848
+ line-height: var(--adyen-internal-text-title-l-line-height);
782
849
  }
783
850
 
784
- .adyen-kyc-u-margin-8 {
785
- margin: var(--adyen-internal-spacer-040, 8px) !important;
851
+ .adyen-kyc-header-title-secondary {
852
+ font-size: var(--adyen-internal-text-title-font-size);
853
+ font-family: var(--adyen-internal-text-title-font-family);
854
+ font-weight: var(--adyen-internal-text-title-font-weight);
786
855
  }
787
856
 
788
- .adyen-kyc-u-margin-bottom-8 {
789
- margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;
857
+ .adyen-kyc-header-description {
858
+ font-size: var(--adyen-internal-text-body-font-size);
859
+ font-family: var(--adyen-internal-text-body-font-family);
860
+ font-weight: var(--adyen-internal-text-body-font-weight);
861
+ line-height: var(--adyen-internal-text-body-line-height);
790
862
  }
791
863
 
792
- .adyen-kyc-u-margin-left-8 {
793
- margin-left: var(--adyen-internal-spacer-040, 8px) !important;
864
+ .adyen-kyc-header-description-primary {
865
+ color: var(--adyen-internal-color-label-primary);
794
866
  }
795
867
 
796
- .adyen-kyc-u-margin-right-8 {
797
- margin-right: var(--adyen-internal-spacer-040, 8px) !important;
868
+ .adyen-kyc-header-description-secondary {
869
+ color: var(--adyen-internal-color-label-secondary);
870
+ }
871
+ .adyen-kyc-u-display-flex {
872
+ display: flex !important;
798
873
  }
799
874
 
800
- .adyen-kyc-u-margin-top-8 {
801
- margin-top: var(--adyen-internal-spacer-040, 8px) !important;
875
+ .adyen-kyc-u-display-inline-flex {
876
+ display: inline-flex !important;
802
877
  }
803
878
 
804
- .adyen-kyc-u-margin-x-8 {
805
- margin-left: var(--adyen-internal-spacer-040, 8px) !important;
806
- margin-right: var(--adyen-internal-spacer-040, 8px) !important;
879
+ .adyen-kyc-u-flex-direction-row {
880
+ flex-direction: row !important;
807
881
  }
808
882
 
809
- .adyen-kyc-u-margin-y-8 {
810
- margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;
811
- margin-top: var(--adyen-internal-spacer-040, 8px) !important;
883
+ .adyen-kyc-u-flex-direction-row-reverse {
884
+ flex-direction: row-reverse !important;
812
885
  }
813
886
 
814
- .adyen-kyc-u-margin-10 {
815
- margin: var(--adyen-internal-spacer-050, 10px) !important;
887
+ .adyen-kyc-u-flex-direction-column {
888
+ flex-direction: column !important;
816
889
  }
817
890
 
818
- .adyen-kyc-u-margin-bottom-10 {
819
- margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;
891
+ .adyen-kyc-u-flex-direction-column-reverse {
892
+ flex-direction: column-reverse !important;
820
893
  }
821
894
 
822
- .adyen-kyc-u-margin-left-10 {
823
- margin-left: var(--adyen-internal-spacer-050, 10px) !important;
895
+ .adyen-kyc-u-flex-wrap-wrap {
896
+ flex-wrap: wrap !important;
824
897
  }
825
898
 
826
- .adyen-kyc-u-margin-right-10 {
827
- margin-right: var(--adyen-internal-spacer-050, 10px) !important;
899
+ .adyen-kyc-u-flex-wrap-nowrap {
900
+ flex-wrap: nowrap !important;
828
901
  }
829
902
 
830
- .adyen-kyc-u-margin-top-10 {
831
- margin-top: var(--adyen-internal-spacer-050, 10px) !important;
903
+ .adyen-kyc-u-align-items-start {
904
+ align-items: start !important;
832
905
  }
833
906
 
834
- .adyen-kyc-u-margin-x-10 {
835
- margin-left: var(--adyen-internal-spacer-050, 10px) !important;
836
- margin-right: var(--adyen-internal-spacer-050, 10px) !important;
907
+ .adyen-kyc-u-align-items-flex-start {
908
+ align-items: flex-start !important;
837
909
  }
838
910
 
839
- .adyen-kyc-u-margin-y-10 {
840
- margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;
841
- margin-top: var(--adyen-internal-spacer-050, 10px) !important;
911
+ .adyen-kyc-u-align-items-flex-end {
912
+ align-items: flex-end !important;
842
913
  }
843
914
 
844
- .adyen-kyc-u-margin-12 {
845
- margin: var(--adyen-internal-spacer-060, 12px) !important;
915
+ .adyen-kyc-u-align-items-center {
916
+ align-items: center !important;
846
917
  }
847
918
 
848
- .adyen-kyc-u-margin-bottom-12 {
849
- margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;
919
+ .adyen-kyc-u-align-items-stretch {
920
+ align-items: stretch !important;
850
921
  }
851
922
 
852
- .adyen-kyc-u-margin-left-12 {
853
- margin-left: var(--adyen-internal-spacer-060, 12px) !important;
923
+ .adyen-kyc-u-align-items-baseline {
924
+ align-items: baseline !important;
854
925
  }
855
926
 
856
- .adyen-kyc-u-margin-right-12 {
857
- margin-right: var(--adyen-internal-spacer-060, 12px) !important;
927
+ .adyen-kyc-u-align-items-end {
928
+ align-items: end !important;
858
929
  }
859
930
 
860
- .adyen-kyc-u-margin-top-12 {
861
- margin-top: var(--adyen-internal-spacer-060, 12px) !important;
931
+ .adyen-kyc-u-justify-content-center {
932
+ justify-content: center !important;
862
933
  }
863
934
 
864
- .adyen-kyc-u-margin-x-12 {
865
- margin-left: var(--adyen-internal-spacer-060, 12px) !important;
866
- margin-right: var(--adyen-internal-spacer-060, 12px) !important;
935
+ .adyen-kyc-u-justify-content-flex-start {
936
+ justify-content: flex-start !important;
867
937
  }
868
938
 
869
- .adyen-kyc-u-margin-y-12 {
870
- margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;
871
- margin-top: var(--adyen-internal-spacer-060, 12px) !important;
939
+ .adyen-kyc-u-justify-content-flex-end {
940
+ justify-content: flex-end !important;
872
941
  }
873
942
 
874
- .adyen-kyc-u-margin-16 {
875
- margin: var(--adyen-internal-spacer-070, 16px) !important;
943
+ .adyen-kyc-u-justify-content-start {
944
+ justify-content: start !important;
876
945
  }
877
946
 
878
- .adyen-kyc-u-margin-bottom-16 {
879
- margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;
947
+ .adyen-kyc-u-justify-content-end {
948
+ justify-content: end !important;
880
949
  }
881
950
 
882
- .adyen-kyc-u-margin-left-16 {
883
- margin-left: var(--adyen-internal-spacer-070, 16px) !important;
951
+ .adyen-kyc-u-justify-content-left {
952
+ justify-content: left !important;
884
953
  }
885
954
 
886
- .adyen-kyc-u-margin-right-16 {
887
- margin-right: var(--adyen-internal-spacer-070, 16px) !important;
955
+ .adyen-kyc-u-justify-content-right {
956
+ justify-content: right !important;
888
957
  }
889
958
 
890
- .adyen-kyc-u-margin-top-16 {
891
- margin-top: var(--adyen-internal-spacer-070, 16px) !important;
959
+ .adyen-kyc-u-justify-content-space-between {
960
+ justify-content: space-between !important;
892
961
  }
893
962
 
894
- .adyen-kyc-u-margin-x-16 {
895
- margin-left: var(--adyen-internal-spacer-070, 16px) !important;
896
- margin-right: var(--adyen-internal-spacer-070, 16px) !important;
963
+ .adyen-kyc-u-justify-content-space-around {
964
+ justify-content: space-around !important;
897
965
  }
898
966
 
899
- .adyen-kyc-u-margin-y-16 {
900
- margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;
901
- margin-top: var(--adyen-internal-spacer-070, 16px) !important;
967
+ .adyen-kyc-u-justify-content-space-evenly {
968
+ justify-content: space-evenly !important;
902
969
  }
903
970
 
904
- .adyen-kyc-u-margin-20 {
905
- margin: var(--adyen-internal-spacer-080, 20px) !important;
971
+ .adyen-kyc-u-justify-content-stretch {
972
+ justify-content: stretch !important;
906
973
  }
907
974
 
908
- .adyen-kyc-u-margin-bottom-20 {
909
- margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;
975
+ .adyen-kyc-u-flex-1 {
976
+ flex: 1 !important;
910
977
  }
911
978
 
912
- .adyen-kyc-u-margin-left-20 {
913
- margin-left: var(--adyen-internal-spacer-080, 20px) !important;
979
+ .adyen-kyc-u-flex-2 {
980
+ flex: 2 !important;
914
981
  }
915
982
 
916
- .adyen-kyc-u-margin-right-20 {
917
- margin-right: var(--adyen-internal-spacer-080, 20px) !important;
983
+ .adyen-kyc-u-flex-3 {
984
+ flex: 3 !important;
918
985
  }
919
986
 
920
- .adyen-kyc-u-margin-top-20 {
921
- margin-top: var(--adyen-internal-spacer-080, 20px) !important;
987
+ .adyen-kyc-u-flex-4 {
988
+ flex: 4 !important;
922
989
  }
923
990
 
924
- .adyen-kyc-u-margin-x-20 {
925
- margin-left: var(--adyen-internal-spacer-080, 20px) !important;
926
- margin-right: var(--adyen-internal-spacer-080, 20px) !important;
991
+ .adyen-kyc-u-margin-auto {
992
+ margin: auto !important;
927
993
  }
928
994
 
929
- .adyen-kyc-u-margin-y-20 {
930
- margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;
931
- margin-top: var(--adyen-internal-spacer-080, 20px) !important;
995
+ .adyen-kyc-u-margin-bottom-auto {
996
+ margin-bottom: auto !important;
932
997
  }
933
998
 
934
- .adyen-kyc-u-margin-24 {
935
- margin: var(--adyen-internal-spacer-090, 24px) !important;
999
+ .adyen-kyc-u-margin-left-auto {
1000
+ margin-left: auto !important;
936
1001
  }
937
1002
 
938
- .adyen-kyc-u-margin-bottom-24 {
939
- margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;
1003
+ .adyen-kyc-u-margin-right-auto {
1004
+ margin-right: auto !important;
940
1005
  }
941
1006
 
942
- .adyen-kyc-u-margin-left-24 {
943
- margin-left: var(--adyen-internal-spacer-090, 24px) !important;
1007
+ .adyen-kyc-u-margin-top-auto {
1008
+ margin-top: auto !important;
944
1009
  }
945
1010
 
946
- .adyen-kyc-u-margin-right-24 {
947
- margin-right: var(--adyen-internal-spacer-090, 24px) !important;
1011
+ .adyen-kyc-u-margin-x-auto {
1012
+ margin-left: auto !important;
1013
+ margin-right: auto !important;
948
1014
  }
949
1015
 
950
- .adyen-kyc-u-margin-top-24 {
951
- margin-top: var(--adyen-internal-spacer-090, 24px) !important;
1016
+ .adyen-kyc-u-margin-y-auto {
1017
+ margin-bottom: auto !important;
1018
+ margin-top: auto !important;
952
1019
  }
953
1020
 
954
- .adyen-kyc-u-margin-x-24 {
955
- margin-left: var(--adyen-internal-spacer-090, 24px) !important;
956
- margin-right: var(--adyen-internal-spacer-090, 24px) !important;
1021
+ .adyen-kyc-u-margin-0 {
1022
+ margin: var(--adyen-internal-spacer-000, 0px) !important;
957
1023
  }
958
1024
 
959
- .adyen-kyc-u-margin-y-24 {
960
- margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;
961
- margin-top: var(--adyen-internal-spacer-090, 24px) !important;
1025
+ .adyen-kyc-u-margin-bottom-0 {
1026
+ margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;
962
1027
  }
963
1028
 
964
- .adyen-kyc-u-margin-32 {
965
- margin: var(--adyen-internal-spacer-100, 32px) !important;
1029
+ .adyen-kyc-u-margin-left-0 {
1030
+ margin-left: var(--adyen-internal-spacer-000, 0px) !important;
966
1031
  }
967
1032
 
968
- .adyen-kyc-u-margin-bottom-32 {
969
- margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;
1033
+ .adyen-kyc-u-margin-right-0 {
1034
+ margin-right: var(--adyen-internal-spacer-000, 0px) !important;
970
1035
  }
971
1036
 
972
- .adyen-kyc-u-margin-left-32 {
973
- margin-left: var(--adyen-internal-spacer-100, 32px) !important;
1037
+ .adyen-kyc-u-margin-top-0 {
1038
+ margin-top: var(--adyen-internal-spacer-000, 0px) !important;
974
1039
  }
975
1040
 
976
- .adyen-kyc-u-margin-right-32 {
977
- margin-right: var(--adyen-internal-spacer-100, 32px) !important;
1041
+ .adyen-kyc-u-margin-x-0 {
1042
+ margin-left: var(--adyen-internal-spacer-000, 0px) !important;
1043
+ margin-right: var(--adyen-internal-spacer-000, 0px) !important;
978
1044
  }
979
1045
 
980
- .adyen-kyc-u-margin-top-32 {
981
- margin-top: var(--adyen-internal-spacer-100, 32px) !important;
1046
+ .adyen-kyc-u-margin-y-0 {
1047
+ margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;
1048
+ margin-top: var(--adyen-internal-spacer-000, 0px) !important;
982
1049
  }
983
1050
 
984
- .adyen-kyc-u-margin-x-32 {
985
- margin-left: var(--adyen-internal-spacer-100, 32px) !important;
986
- margin-right: var(--adyen-internal-spacer-100, 32px) !important;
1051
+ .adyen-kyc-u-margin-2 {
1052
+ margin: var(--adyen-internal-spacer-010, 2px) !important;
987
1053
  }
988
1054
 
989
- .adyen-kyc-u-margin-y-32 {
990
- margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;
991
- margin-top: var(--adyen-internal-spacer-100, 32px) !important;
1055
+ .adyen-kyc-u-margin-bottom-2 {
1056
+ margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;
992
1057
  }
993
1058
 
994
- .adyen-kyc-u-margin-40 {
995
- margin: var(--adyen-internal-spacer-110, 40px) !important;
1059
+ .adyen-kyc-u-margin-left-2 {
1060
+ margin-left: var(--adyen-internal-spacer-010, 2px) !important;
996
1061
  }
997
1062
 
998
- .adyen-kyc-u-margin-bottom-40 {
999
- margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;
1063
+ .adyen-kyc-u-margin-right-2 {
1064
+ margin-right: var(--adyen-internal-spacer-010, 2px) !important;
1000
1065
  }
1001
1066
 
1002
- .adyen-kyc-u-margin-left-40 {
1003
- margin-left: var(--adyen-internal-spacer-110, 40px) !important;
1067
+ .adyen-kyc-u-margin-top-2 {
1068
+ margin-top: var(--adyen-internal-spacer-010, 2px) !important;
1004
1069
  }
1005
1070
 
1006
- .adyen-kyc-u-margin-right-40 {
1007
- margin-right: var(--adyen-internal-spacer-110, 40px) !important;
1071
+ .adyen-kyc-u-margin-x-2 {
1072
+ margin-left: var(--adyen-internal-spacer-010, 2px) !important;
1073
+ margin-right: var(--adyen-internal-spacer-010, 2px) !important;
1008
1074
  }
1009
1075
 
1010
- .adyen-kyc-u-margin-top-40 {
1011
- margin-top: var(--adyen-internal-spacer-110, 40px) !important;
1076
+ .adyen-kyc-u-margin-y-2 {
1077
+ margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;
1078
+ margin-top: var(--adyen-internal-spacer-010, 2px) !important;
1012
1079
  }
1013
1080
 
1014
- .adyen-kyc-u-margin-x-40 {
1015
- margin-left: var(--adyen-internal-spacer-110, 40px) !important;
1016
- margin-right: var(--adyen-internal-spacer-110, 40px) !important;
1081
+ .adyen-kyc-u-margin-4 {
1082
+ margin: var(--adyen-internal-spacer-020, 4px) !important;
1017
1083
  }
1018
1084
 
1019
- .adyen-kyc-u-margin-y-40 {
1020
- margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;
1021
- margin-top: var(--adyen-internal-spacer-110, 40px) !important;
1085
+ .adyen-kyc-u-margin-bottom-4 {
1086
+ margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;
1022
1087
  }
1023
1088
 
1024
- .adyen-kyc-u-margin-48 {
1025
- margin: var(--adyen-internal-spacer-120, 48px) !important;
1089
+ .adyen-kyc-u-margin-left-4 {
1090
+ margin-left: var(--adyen-internal-spacer-020, 4px) !important;
1026
1091
  }
1027
1092
 
1028
- .adyen-kyc-u-margin-bottom-48 {
1029
- margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
1093
+ .adyen-kyc-u-margin-right-4 {
1094
+ margin-right: var(--adyen-internal-spacer-020, 4px) !important;
1030
1095
  }
1031
1096
 
1032
- .adyen-kyc-u-margin-left-48 {
1033
- margin-left: var(--adyen-internal-spacer-120, 48px) !important;
1097
+ .adyen-kyc-u-margin-top-4 {
1098
+ margin-top: var(--adyen-internal-spacer-020, 4px) !important;
1034
1099
  }
1035
1100
 
1036
- .adyen-kyc-u-margin-right-48 {
1037
- margin-right: var(--adyen-internal-spacer-120, 48px) !important;
1101
+ .adyen-kyc-u-margin-x-4 {
1102
+ margin-left: var(--adyen-internal-spacer-020, 4px) !important;
1103
+ margin-right: var(--adyen-internal-spacer-020, 4px) !important;
1038
1104
  }
1039
1105
 
1040
- .adyen-kyc-u-margin-top-48 {
1041
- margin-top: var(--adyen-internal-spacer-120, 48px) !important;
1106
+ .adyen-kyc-u-margin-y-4 {
1107
+ margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;
1108
+ margin-top: var(--adyen-internal-spacer-020, 4px) !important;
1042
1109
  }
1043
1110
 
1044
- .adyen-kyc-u-margin-x-48 {
1045
- margin-left: var(--adyen-internal-spacer-120, 48px) !important;
1046
- margin-right: var(--adyen-internal-spacer-120, 48px) !important;
1111
+ .adyen-kyc-u-margin-6 {
1112
+ margin: var(--adyen-internal-spacer-030, 6px) !important;
1047
1113
  }
1048
1114
 
1049
- .adyen-kyc-u-margin-y-48 {
1050
- margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
1051
- margin-top: var(--adyen-internal-spacer-120, 48px) !important;
1115
+ .adyen-kyc-u-margin-bottom-6 {
1116
+ margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;
1052
1117
  }
1053
1118
 
1054
- /* for container queries */
1055
- .adyen-kyc-u-width-full {
1056
- width: 100% !important;
1119
+ .adyen-kyc-u-margin-left-6 {
1120
+ margin-left: var(--adyen-internal-spacer-030, 6px) !important;
1057
1121
  }
1058
1122
 
1059
- .adyen-kyc-u-width-half {
1060
- width: 50% !important;
1123
+ .adyen-kyc-u-margin-right-6 {
1124
+ margin-right: var(--adyen-internal-spacer-030, 6px) !important;
1061
1125
  }
1062
1126
 
1063
- /* Topmost/root container class */
1064
- .adyen-kyc-ui-element-container-wrapper {
1065
- width: 100%;
1066
- overflow: auto;
1067
- /**
1068
- * main container query, used similarly to a @media query
1069
- * considering our Component can be embedded in a container of arbitrary size
1070
- * that does not necessarily match the whole window/screen size.
1071
- * Uses s and l breakpoints defined in variables.
1072
- */
1073
- container-type: inline-size;
1074
- container-name: main;
1127
+ .adyen-kyc-u-margin-top-6 {
1128
+ margin-top: var(--adyen-internal-spacer-030, 6px) !important;
1075
1129
  }
1076
1130
 
1077
- .adyen-kyc-ui-element-container-wrapper *,
1078
- .adyen-kyc-ui-element-container-wrapper *::after,
1079
- .adyen-kyc-ui-element-container-wrapper *::before {
1080
- box-sizing: border-box;
1131
+ .adyen-kyc-u-margin-x-6 {
1132
+ margin-left: var(--adyen-internal-spacer-030, 6px) !important;
1133
+ margin-right: var(--adyen-internal-spacer-030, 6px) !important;
1081
1134
  }
1082
1135
 
1083
- .adyen-kyc-ui-element-container {
1084
- background-color: var(--adyen-internal-color-background-primary, #ffffff);
1085
- position: relative;
1086
- padding: var(--adyen-internal-spacer-100, 32px);
1087
- border-radius: var(--adyen-internal-border-radius-m, 8px);
1088
- font-family: var(--adyen-internal-text-body-font-family);
1089
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1090
- font-weight: var(--adyen-internal-text-body-font-weight, 400);
1091
- line-height: var(--adyen-internal-text-body-line-height, 20px);
1092
- color: var(--adyen-internal-color-label-primary, #001222);
1136
+ .adyen-kyc-u-margin-y-6 {
1137
+ margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;
1138
+ margin-top: var(--adyen-internal-spacer-030, 6px) !important;
1093
1139
  }
1094
- .adyen-kyc-ui-element-container p,
1095
- .adyen-kyc-ui-element-container ol,
1096
- .adyen-kyc-ui-element-container ul {
1097
- margin-bottom: 0;
1098
- margin-top: 0;
1140
+
1141
+ .adyen-kyc-u-margin-8 {
1142
+ margin: var(--adyen-internal-spacer-040, 8px) !important;
1099
1143
  }
1100
- .adyen-kyc-ui-element-container ul,
1101
- .adyen-kyc-ui-element-container ol {
1102
- padding-left: 1.5em;
1144
+
1145
+ .adyen-kyc-u-margin-bottom-8 {
1146
+ margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;
1103
1147
  }
1104
- @container main (max-width: 680px) {
1105
- .adyen-kyc-ui-element-container {
1106
- padding: var(--adyen-internal-spacer-070, 16px);
1107
- }
1148
+
1149
+ .adyen-kyc-u-margin-left-8 {
1150
+ margin-left: var(--adyen-internal-spacer-040, 8px) !important;
1108
1151
  }
1109
1152
 
1110
- /*
1111
- * Compatibility later to ensure components do NOT receive extra padding
1112
- * as is the case with dropins, without breaking dropins.
1113
- * Once the Component Layout has been done \`.adyen-kyc-externalComponent\`
1114
- * can be safely removed everywere.
1115
- */
1116
- .adyen-kyc-ui-element-container:has(.adyen-kyc-externalComponent) {
1117
- padding: 0;
1153
+ .adyen-kyc-u-margin-right-8 {
1154
+ margin-right: var(--adyen-internal-spacer-040, 8px) !important;
1118
1155
  }
1119
1156
 
1120
- /**
1121
- * :root is needed for non-web components, while :host for web components (TODO: change on v4)
1122
- *
1123
- * This produces css like:
1124
- * --adyen-internal-text-color: var(--adyen-sdk-text-color, #000);
1125
- *
1126
- * The \`internal\` part matches how we use css variables in the code
1127
- * The \`sdk\` part is how consumers customize it from outside our code
1128
- * The $value is the fallback bare value, used when the variable was not customized
1129
- *
1130
- * The reason we have \`internal\` and \`sdk\` is because doing something like:
1131
- * --color: var(--color, #0f0) would create a loop, and the browser ignores it.
1132
- *
1133
- */
1134
- :root,
1135
- :host {
1136
- --adyen-internal-animation-easing-standard: var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
1137
- --adyen-internal-animation-easing-enter: var(--adyen-sdk-animation-easing-enter, cubic-bezier(0.12, 0.6, 0.4, 0.95));
1138
- --adyen-internal-animation-easing-exit: var(--adyen-sdk-animation-easing-exit, cubic-bezier(0.4, 0, 1, 1));
1139
- --adyen-internal-animation-easing-linear: var(--adyen-sdk-animation-easing-linear, linear);
1140
- --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
1141
- --adyen-internal-animation-duration-moderate: var(--adyen-sdk-animation-duration-moderate, 150ms);
1142
- --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
1143
- --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #ffffff);
1144
- --adyen-internal-color-background-primary-hover: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);
1145
- --adyen-internal-color-background-primary-active: var(--adyen-sdk-color-background-primary-active, #ecedef);
1146
- --adyen-internal-color-background-secondary: var(--adyen-sdk-color-background-secondary, #f4f5f6);
1147
- --adyen-internal-color-background-secondary-hover: var(--adyen-sdk-color-background-secondary-hover, #ecedef);
1148
- --adyen-internal-color-background-secondary-active: var(--adyen-sdk-color-background-secondary-active, #e2e5e7);
1149
- --adyen-internal-color-background-tertiary: var(--adyen-sdk-color-background-tertiary, #ecedef);
1150
- --adyen-internal-color-background-tertiary-hover: var(--adyen-sdk-color-background-tertiary-hover, #e2e5e7);
1151
- --adyen-internal-color-background-tertiary-active: var(--adyen-sdk-color-background-tertiary-active, #dadddf);
1152
- --adyen-internal-color-background-quaternary: var(--adyen-sdk-color-background-quaternary, #c0c5ca);
1153
- --adyen-internal-color-background-quaternary-hover: var(--adyen-sdk-color-background-quaternary-hover, #b7bdc2);
1154
- --adyen-internal-color-background-quaternary-active: var(--adyen-sdk-color-background-quaternary-active, #aeb5ba);
1155
- --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #ffffff);
1156
- --adyen-internal-color-background-modal-hover: var(--adyen-sdk-color-background-modal-hover, #f4f5f6);
1157
- --adyen-internal-color-background-modal-active: var(--adyen-sdk-color-background-modal-active, #ecedef);
1158
- --adyen-internal-color-background-disabled: var(--adyen-sdk-color-background-disabled, #ecedef);
1159
- --adyen-internal-color-background-selected: var(--adyen-sdk-color-background-selected, #e3effb);
1160
- --adyen-internal-color-background-selected-hover: var(--adyen-sdk-color-background-selected-hover, #d4e6f9);
1161
- --adyen-internal-color-background-selected-active: var(--adyen-sdk-color-background-selected-active, #c8dff7);
1162
- --adyen-internal-color-background-spotlight: var(--adyen-sdk-color-background-spotlight, #ffe379);
1163
- --adyen-internal-color-background-critical-weak: var(--adyen-sdk-color-background-critical-weak, #fff3ef);
1164
- --adyen-internal-color-background-critical-strong: var(--adyen-sdk-color-background-critical-strong, #dc3801);
1165
- --adyen-internal-color-background-critical-strong-hover: var(--adyen-sdk-color-background-critical-strong-hover, #c13101);
1166
- --adyen-internal-color-background-critical-strong-active: var(--adyen-sdk-color-background-critical-strong-active, #751e00);
1167
- --adyen-internal-color-background-warning-weak: var(--adyen-sdk-color-background-warning-weak, #fff4e5);
1168
- --adyen-internal-color-background-warning-weak-hover: var(--adyen-sdk-color-background-warning-weak-hover, #ffecd0);
1169
- --adyen-internal-color-background-warning-weak-active: var(--adyen-sdk-color-background-warning-weak-active, #ffe0b3);
1170
- --adyen-internal-color-background-warning-strong: var(--adyen-sdk-color-background-warning-strong, #d77f00);
1171
- --adyen-internal-color-background-success-weak: var(--adyen-sdk-color-background-success-weak, #e4faef);
1172
- --adyen-internal-color-background-success-strong: var(--adyen-sdk-color-background-success-strong, #008845);
1173
- --adyen-internal-color-background-highlight-weak: var(--adyen-sdk-color-background-highlight-weak, #f0f6fd);
1174
- --adyen-internal-color-background-highlight-strong: var(--adyen-sdk-color-background-highlight-strong, #0f75dc);
1175
- --adyen-internal-color-background-inverse-primary: var(--adyen-sdk-color-background-inverse-primary, #001222);
1176
- --adyen-internal-color-background-inverse-primary-hover: var(--adyen-sdk-color-background-inverse-primary-hover, #5c6874);
1177
- --adyen-internal-color-background-inverse-primary-active: var(--adyen-sdk-color-background-inverse-primary-active, #6c7782);
1178
- --adyen-internal-color-background-inverse-secondary: var(--adyen-sdk-color-background-inverse-secondary, #1a2b3b);
1179
- --adyen-internal-color-background-inverse-secondary-hover: var(--adyen-sdk-color-background-inverse-secondary-hover, #273746);
1180
- --adyen-internal-color-background-inverse-secondary-active: var(--adyen-sdk-color-background-inverse-secondary-active, #364553);
1181
- --adyen-internal-color-background-inverse-disabled: var(--adyen-sdk-color-background-inverse-disabled, #273746);
1182
- --adyen-internal-color-background-inverse-critical-weak: var(--adyen-sdk-color-background-inverse-critical-weak, #5c1800);
1183
- --adyen-internal-color-background-inverse-critical-strong: var(--adyen-sdk-color-background-inverse-critical-strong, #ff9a78);
1184
- --adyen-internal-color-background-inverse-critical-strong-hover: var(--adyen-sdk-color-background-inverse-critical-strong-hover, #ffbda6);
1185
- --adyen-internal-color-background-inverse-critical-strong-active: var(--adyen-sdk-color-background-inverse-critical-strong-active, #ffded3);
1186
- --adyen-internal-color-background-always-light: var(--adyen-sdk-color-background-always-light, #ffffff);
1187
- --adyen-internal-color-background-always-light-hover: var(--adyen-sdk-color-background-always-light-hover, #f4f5f6);
1188
- --adyen-internal-color-background-always-light-active: var(--adyen-sdk-color-background-always-light-active, #ecedef);
1189
- --adyen-internal-color-background-always-light-disabled: var(--adyen-sdk-color-background-always-light-disabled, #ecedef);
1190
- --adyen-internal-color-background-always-light-selected: var(--adyen-sdk-color-background-always-light-selected, #e3effb);
1191
- --adyen-internal-color-background-always-dark: var(--adyen-sdk-color-background-always-dark, #001222);
1192
- --adyen-internal-color-background-always-dark-hover: var(--adyen-sdk-color-background-always-dark-hover, #5c6874);
1193
- --adyen-internal-color-background-always-dark-active: var(--adyen-sdk-color-background-always-dark-active, #8c959d);
1194
- --adyen-internal-color-background-always-dark-disabled: var(--adyen-sdk-color-background-always-dark-disabled, #ecedef);
1195
- --adyen-internal-color-background-always-dark-selected: var(--adyen-sdk-color-background-always-dark-selected, #00305f);
1196
- --adyen-internal-color-background-always-dark-primary: var(--adyen-sdk-color-background-always-dark-primary, #001222);
1197
- --adyen-internal-color-background-always-dark-primary-hover: var(--adyen-sdk-color-background-always-dark-primary-hover, #132434);
1198
- --adyen-internal-color-background-always-dark-primary-active: var(--adyen-sdk-color-background-always-dark-primary-active, #213140);
1199
- --adyen-internal-color-background-always-dark-primary-disabled: var(--adyen-sdk-color-background-always-dark-primary-disabled, #ecedef);
1200
- --adyen-internal-color-background-always-dark-primary-selected: var(--adyen-sdk-color-background-always-dark-primary-selected, #00305f);
1201
- --adyen-internal-color-background-always-dark-secondary: var(--adyen-sdk-color-background-always-dark-secondary, #213140);
1202
- --adyen-internal-color-background-always-dark-secondary-hover: var(--adyen-sdk-color-background-always-dark-secondary-hover, #364553);
1203
- --adyen-internal-color-background-always-dark-secondary-active: var(--adyen-sdk-color-background-always-dark-secondary-active, #455460);
1204
- --adyen-internal-color-background-always-dark-secondary-disabled: var(--adyen-sdk-color-background-always-dark-secondary-disabled, #ecedef);
1205
- --adyen-internal-color-background-always-dark-secondary-selected: var(--adyen-sdk-color-background-always-dark-secondary-selected, #00305f);
1206
- --adyen-internal-color-background-always-dark-tertiary: var(--adyen-sdk-color-background-always-dark-tertiary, #2f3e4d);
1207
- --adyen-internal-color-background-always-dark-tertiary-hover: var(--adyen-sdk-color-background-always-dark-tertiary-hover, #3d4c5a);
1208
- --adyen-internal-color-background-always-dark-tertiary-active: var(--adyen-sdk-color-background-always-dark-tertiary-active, #455460);
1209
- --adyen-internal-color-background-always-dark-tertiary-disabled: var(--adyen-sdk-color-background-always-dark-tertiary-disabled, #ecedef);
1210
- --adyen-internal-color-background-always-dark-tertiary-selected: var(--adyen-sdk-color-background-always-dark-tertiary-selected, #00305f);
1211
- --adyen-internal-color-label-primary: var(--adyen-sdk-color-label-primary, #001222);
1212
- --adyen-internal-color-label-primary-hover: var(--adyen-sdk-color-label-primary-hover, #5c6874);
1213
- --adyen-internal-color-label-primary-active: var(--adyen-sdk-color-label-primary-active, #6c7782);
1214
- --adyen-internal-color-label-secondary: var(--adyen-sdk-color-label-secondary, #5c6874);
1215
- --adyen-internal-color-label-tertiary: var(--adyen-sdk-color-label-tertiary, #8c959d);
1216
- --adyen-internal-color-label-disabled: var(--adyen-sdk-color-label-disabled, #8c959d);
1217
- --adyen-internal-color-label-critical: var(--adyen-sdk-color-label-critical, #dc3801);
1218
- --adyen-internal-color-label-critical-hover: var(--adyen-sdk-color-label-critical-hover, #c13101);
1219
- --adyen-internal-color-label-critical-active: var(--adyen-sdk-color-label-critical-active, #751e00);
1220
- --adyen-internal-color-label-warning: var(--adyen-sdk-color-label-warning, #ab6600);
1221
- --adyen-internal-color-label-highlight: var(--adyen-sdk-color-label-highlight, #0f75dc);
1222
- --adyen-internal-color-label-success: var(--adyen-sdk-color-label-success, #008845);
1223
- --adyen-internal-color-label-on-color: var(--adyen-sdk-color-label-on-color, #ffffff);
1224
- --adyen-internal-color-label-inverse-primary: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
1225
- --adyen-internal-color-label-inverse-primary-hover: var(--adyen-sdk-color-label-inverse-primary-hover, #f4f5f6);
1226
- --adyen-internal-color-label-inverse-primary-active: var(--adyen-sdk-color-label-inverse-primary-active, #ecedef);
1227
- --adyen-internal-color-label-inverse-secondary: var(--adyen-sdk-color-label-inverse-secondary, #9da5ac);
1228
- --adyen-internal-color-label-inverse-disabled: var(--adyen-sdk-color-label-inverse-disabled, #737e88);
1229
- --adyen-internal-color-label-inverse-critical: var(--adyen-sdk-color-label-inverse-critical, #ff9a78);
1230
- --adyen-internal-color-label-inverse-critical-hover: var(--adyen-sdk-color-label-inverse-critical-hover, #ffbda6);
1231
- --adyen-internal-color-label-inverse-critical-active: var(--adyen-sdk-color-label-inverse-critical-active, #ffded3);
1232
- --adyen-internal-color-label-on-background-critical-weak: var(--adyen-sdk-color-label-on-background-critical-weak, #c13101);
1233
- --adyen-internal-color-label-on-background-warning-weak: var(--adyen-sdk-color-label-on-background-warning-weak, #955900);
1234
- --adyen-internal-color-label-on-background-success-weak: var(--adyen-sdk-color-label-on-background-success-weak, #00773c);
1235
- --adyen-internal-color-label-on-background-highlight-weak: var(--adyen-sdk-color-label-on-background-highlight-weak, #0065c9);
1236
- --adyen-internal-color-label-always-light: var(--adyen-sdk-color-label-always-light, #ffffff);
1237
- --adyen-internal-color-label-always-light-primary: var(--adyen-sdk-color-label-always-light-primary, #ecedef);
1238
- --adyen-internal-color-label-always-light-primary-hover: var(--adyen-sdk-color-label-always-light-primary-hover, #c8ccd0);
1239
- --adyen-internal-color-label-always-light-primary-active: var(--adyen-sdk-color-label-always-light-primary-active, #959da5);
1240
- --adyen-internal-color-label-always-light-secondary: var(--adyen-sdk-color-label-always-light-secondary, #a6adb3);
1241
- --adyen-internal-color-label-always-light-secondary-hover: var(--adyen-sdk-color-label-always-light-secondary-hover, #959da5);
1242
- --adyen-internal-color-label-always-light-secondary-active: var(--adyen-sdk-color-label-always-light-secondary-active, #737e88);
1243
- --adyen-internal-color-label-always-light-tertiary: var(--adyen-sdk-color-label-always-light-tertiary, #848d96);
1244
- --adyen-internal-color-label-always-light-tertiary-hover: var(--adyen-sdk-color-label-always-light-tertiary-hover, #737e88);
1245
- --adyen-internal-color-label-always-light-tertiary-active: var(--adyen-sdk-color-label-always-light-tertiary-active, #54616d);
1246
- --adyen-internal-color-label-always-dark: var(--adyen-sdk-color-label-always-dark, #001222);
1247
- --adyen-internal-color-link-primary: var(--adyen-sdk-color-link-primary, #0065c9);
1248
- --adyen-internal-color-link-primary-hover: var(--adyen-sdk-color-link-primary-hover, #0f75dc);
1249
- --adyen-internal-color-link-primary-active: var(--adyen-sdk-color-link-primary-active, #0f75dc);
1250
- --adyen-internal-color-link-primary-disabled: var(--adyen-sdk-color-link-primary-disabled, #8c959d);
1251
- --adyen-internal-color-link-primary-visited: var(--adyen-sdk-color-link-primary-visited, #540884);
1252
- --adyen-internal-color-link-primary-visited-hover: var(--adyen-sdk-color-link-primary-visited-hover, #710ab3);
1253
- --adyen-internal-color-link-primary-visited-active: var(--adyen-sdk-color-link-primary-visited-active, #710ab3);
1254
- --adyen-internal-color-link-quiet: var(--adyen-sdk-color-link-quiet, #001222);
1255
- --adyen-internal-color-link-quiet-hover: var(--adyen-sdk-color-link-quiet-hover, #5c6874);
1256
- --adyen-internal-color-link-quiet-active: var(--adyen-sdk-color-link-quiet-active, #5c6874);
1257
- --adyen-internal-color-link-quiet-disabled: var(--adyen-sdk-color-link-quiet-disabled, #8c959d);
1258
- --adyen-internal-color-outline-primary: var(--adyen-sdk-color-outline-primary, #dadddf);
1259
- --adyen-internal-color-outline-primary-hover: var(--adyen-sdk-color-outline-primary-hover, #c8ccd0);
1260
- --adyen-internal-color-outline-primary-active: var(--adyen-sdk-color-outline-primary-active, #001222);
1261
- --adyen-internal-color-outline-secondary: var(--adyen-sdk-color-outline-secondary, #c8ccd0);
1262
- --adyen-internal-color-outline-secondary-hover: var(--adyen-sdk-color-outline-secondary-hover, #b7bdc2);
1263
- --adyen-internal-color-outline-secondary-active: var(--adyen-sdk-color-outline-secondary-active, #001222);
1264
- --adyen-internal-color-outline-tertiary: var(--adyen-sdk-color-outline-tertiary, #8c959d);
1265
- --adyen-internal-color-outline-tertiary-hover: var(--adyen-sdk-color-outline-tertiary-hover, #6c7782);
1266
- --adyen-internal-color-outline-tertiary-active: var(--adyen-sdk-color-outline-tertiary-active, #001222);
1267
- --adyen-internal-color-outline-disabled: var(--adyen-sdk-color-outline-disabled, #dadddf);
1268
- --adyen-internal-color-outline-selected: var(--adyen-sdk-color-outline-selected, #001222);
1269
- --adyen-internal-color-outline-critical: var(--adyen-sdk-color-outline-critical, #dc3801);
1270
- --adyen-internal-color-outline-critical-hover: var(--adyen-sdk-color-outline-critical-hover, #c13101);
1271
- --adyen-internal-color-outline-critical-active: var(--adyen-sdk-color-outline-critical-active, #751e00);
1272
- --adyen-internal-color-outline-success: var(--adyen-sdk-color-outline-success, #008845);
1273
- --adyen-internal-color-outline-success-hover: var(--adyen-sdk-color-outline-success-hover, #00773c);
1274
- --adyen-internal-color-outline-success-active: var(--adyen-sdk-color-outline-success-active, #004724);
1275
- --adyen-internal-color-outline-inverse-primary: var(--adyen-sdk-color-outline-inverse-primary, #2f3e4d);
1276
- --adyen-internal-color-outline-inverse-primary-hover: var(--adyen-sdk-color-outline-inverse-primary-hover, #6c7782);
1277
- --adyen-internal-color-outline-inverse-primary-active: var(--adyen-sdk-color-outline-inverse-primary-active, #9da5ac);
1278
- --adyen-internal-color-outline-inverse-disabled: var(--adyen-sdk-color-outline-inverse-disabled, #455460);
1279
- --adyen-internal-color-outline-inverse-critical: var(--adyen-sdk-color-outline-inverse-critical, #ff9a78);
1280
- --adyen-internal-color-outline-inverse-critical-hover: var(--adyen-sdk-color-outline-inverse-critical-hover, #ffbda6);
1281
- --adyen-internal-color-outline-inverse-critical-active: var(--adyen-sdk-color-outline-inverse-critical-active, #ffded3);
1282
- --adyen-internal-color-separator-primary: var(--adyen-sdk-color-separator-primary, #dadddf);
1283
- --adyen-internal-color-separator-secondary: var(--adyen-sdk-color-separator-secondary, #c8ccd0);
1284
- --adyen-internal-color-separator-inverse-primary: var(--adyen-sdk-color-separator-inverse-primary, #2f3e4d);
1285
- --adyen-internal-color-separator-inverse-secondary: var(--adyen-sdk-color-separator-inverse-secondary, #5c6874);
1286
- --adyen-internal-color-decorative-green: var(--adyen-sdk-color-decorative-green, #00d16a);
1287
- --adyen-internal-color-decorative-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
1288
- --adyen-internal-color-decorative-yellow: var(--adyen-sdk-color-decorative-yellow, #f9c500);
1289
- --adyen-internal-color-decorative-orange: var(--adyen-sdk-color-decorative-orange, #f99300);
1290
- --adyen-internal-color-decorative-red: var(--adyen-sdk-color-decorative-red, #f73f01);
1291
- --adyen-internal-color-decorative-grey: var(--adyen-sdk-color-decorative-grey, #848d96);
1292
- --adyen-internal-color-support-overlay: var(--adyen-sdk-color-support-overlay, #001222);
1293
- --adyen-internal-color-support-shadow: var(--adyen-sdk-color-support-shadow, #001222);
1294
- --adyen-internal-text-font-variant-numeric: var(--adyen-sdk-text-font-variant-numeric, normal);
1295
- --adyen-internal-text-rich-text-heading-margin: var(--adyen-sdk-text-rich-text-heading-margin, 32px 0 10px 0);
1296
- --adyen-internal-text-rich-text-heading-font-weight: var(--adyen-sdk-text-rich-text-heading-font-weight, 700);
1297
- --adyen-internal-text-rich-text-paragraph-margin: var(--adyen-sdk-text-rich-text-paragraph-margin, 0 0 8px 0);
1298
- --adyen-internal-text-rich-text-list-padding-left: var(--adyen-sdk-text-rich-text-list-padding-left, 20px);
1299
- --adyen-internal-text-rich-text-list-margin: var(--adyen-sdk-text-rich-text-list-margin, 0 0 4px 0);
1300
- --adyen-internal-text-rich-text-code-background-color: var(--adyen-sdk-text-rich-text-code-background-color, #f4f5f6);
1301
- --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);
1302
- --adyen-internal-text-rich-text-code-font-weight: var(--adyen-sdk-text-rich-text-code-font-weight, 500);
1303
- --adyen-internal-text-rich-text-pre-margin: var(--adyen-sdk-text-rich-text-pre-margin, 16px 0 16px 0);
1304
- --adyen-internal-text-rich-text-pre-padding: var(--adyen-sdk-text-rich-text-pre-padding, 10px 16px);
1305
- --adyen-internal-text-rich-text-pre-line-height: var(--adyen-sdk-text-rich-text-pre-line-height, 24px);
1306
- --adyen-internal-text-rich-text-mark-background-color: var(--adyen-sdk-text-rich-text-mark-background-color, #f0f6fd);
1307
- --adyen-internal-text-rich-text-blockquote-font-weight: var(--adyen-sdk-text-rich-text-blockquote-font-weight, 500);
1308
- --adyen-internal-text-rich-text-blockquote-margin: var(--adyen-sdk-text-rich-text-blockquote-margin, 16px 0 16px 16px);
1309
- --adyen-internal-text-rich-text-table-border: var(--adyen-sdk-text-rich-text-table-border, 1px solid #dadddf);
1310
- --adyen-internal-text-rich-text-table-line-height: var(--adyen-sdk-text-rich-text-table-line-height, 20px);
1311
- --adyen-internal-text-rich-text-table-margin: var(--adyen-sdk-text-rich-text-table-margin, 16px 0 16px 0);
1312
- --adyen-internal-text-rich-text-table-padding: var(--adyen-sdk-text-rich-text-table-padding, 10px 16px);
1313
- --adyen-internal-text-rich-text-table-header-font-weight: var(--adyen-sdk-text-rich-text-table-header-font-weight, 700);
1314
- --adyen-internal-text-rich-text-table-caption-line-height: var(--adyen-sdk-text-rich-text-table-caption-line-height, 20px);
1315
- --adyen-internal-text-rich-text-table-caption-margin: var(--adyen-sdk-text-rich-text-table-caption-margin, 0 0 6px 0);
1316
- --adyen-internal-text-rich-text-caption-paragraph-margin: var(--adyen-sdk-text-rich-text-caption-paragraph-margin, 0 0 6px 0);
1317
- --adyen-internal-text-rich-text-caption-list-padding-left: var(--adyen-sdk-text-rich-text-caption-list-padding-left, 16px);
1318
- --adyen-internal-text-rich-text-caption-list-margin: var(--adyen-sdk-text-rich-text-caption-list-margin, 0 0 2px 0);
1319
- --adyen-internal-text-rich-text-caption-blockquote-margin: var(--adyen-sdk-text-rich-text-caption-blockquote-margin, 12px 0 12px 16px);
1320
- --adyen-internal-text-rich-text-caption-pre-line-height: var(--adyen-sdk-text-rich-text-caption-pre-line-height, 20px);
1321
- --adyen-internal-text-rich-text-caption-table-padding: var(--adyen-sdk-text-rich-text-caption-table-padding, 8px 12px);
1322
- --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1323
- --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);
1324
- --adyen-internal-text-caption-font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1325
- --adyen-internal-text-caption-font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
1326
- --adyen-internal-text-caption-line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1327
- --adyen-internal-text-caption-letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
1328
- --adyen-internal-text-caption-wide-line-height: var(--adyen-sdk-text-caption-wide-line-height, 20px);
1329
- --adyen-internal-text-caption-stronger-font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
1330
- --adyen-internal-text-caption-stronger-wide-font-weight: var(--adyen-sdk-text-caption-stronger-wide-font-weight, 500);
1331
- --adyen-internal-text-caption-stronger-wide-line-height: var(--adyen-sdk-text-caption-stronger-wide-line-height, 20px);
1332
- --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1333
- --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);
1334
- --adyen-internal-text-body-font-size: var(--adyen-sdk-text-body-font-size, 14px);
1335
- --adyen-internal-text-body-font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1336
- --adyen-internal-text-body-line-height: var(--adyen-sdk-text-body-line-height, 20px);
1337
- --adyen-internal-text-body-letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
1338
- --adyen-internal-text-body-wide-line-height: var(--adyen-sdk-text-body-wide-line-height, 24px);
1339
- --adyen-internal-text-body-stronger-font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
1340
- --adyen-internal-text-body-stronger-wide-font-weight: var(--adyen-sdk-text-body-stronger-wide-font-weight, 500);
1341
- --adyen-internal-text-body-stronger-wide-line-height: var(--adyen-sdk-text-body-stronger-wide-line-height, 24px);
1342
- --adyen-internal-text-body-strongest-font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
1343
- --adyen-internal-text-body-strongest-wide-font-weight: var(--adyen-sdk-text-body-strongest-wide-font-weight, 600);
1344
- --adyen-internal-text-body-strongest-wide-line-height: var(--adyen-sdk-text-body-strongest-wide-line-height, 24px);
1345
- --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1346
- --adyen-internal-text-subtitle-font-size: var(--adyen-sdk-text-subtitle-font-size, 16px);
1347
- --adyen-internal-text-subtitle-font-weight: var(--adyen-sdk-text-subtitle-font-weight, 500);
1348
- --adyen-internal-text-subtitle-line-height: var(--adyen-sdk-text-subtitle-line-height, 26px);
1349
- --adyen-internal-text-subtitle-letter-spacing: var(--adyen-sdk-text-subtitle-letter-spacing, 0);
1350
- --adyen-internal-text-subtitle-stronger-font-weight: var(--adyen-sdk-text-subtitle-stronger-font-weight, 600);
1351
- --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1352
- --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);
1353
- --adyen-internal-text-title-font-size: var(--adyen-sdk-text-title-font-size, 16px);
1354
- --adyen-internal-text-title-font-weight: var(--adyen-sdk-text-title-font-weight, 600);
1355
- --adyen-internal-text-title-line-height: var(--adyen-sdk-text-title-line-height, 26px);
1356
- --adyen-internal-text-title-letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
1357
- --adyen-internal-text-title-mobile-font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
1358
- --adyen-internal-text-title-mobile-line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
1359
- --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);
1360
- --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);
1361
- --adyen-internal-text-title-m-font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
1362
- --adyen-internal-text-title-m-font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
1363
- --adyen-internal-text-title-m-line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
1364
- --adyen-internal-text-title-m-letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
1365
- --adyen-internal-text-title-m-mobile-font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
1366
- --adyen-internal-text-title-m-mobile-line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
1367
- --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);
1368
- --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);
1369
- --adyen-internal-text-title-l-font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
1370
- --adyen-internal-text-title-l-font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
1371
- --adyen-internal-text-title-l-line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
1372
- --adyen-internal-text-title-l-letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
1373
- --adyen-internal-text-title-l-mobile-font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
1374
- --adyen-internal-text-title-l-mobile-line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
1375
- --adyen-internal-focus-ring-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
1376
- --adyen-internal-focus-ring-spacer: var(--adyen-sdk-focus-ring-spacer, 1px);
1377
- --adyen-internal-focus-ring-outline: var(--adyen-sdk-focus-ring-outline, 3px);
1378
- --adyen-internal-spacer-100: var(--adyen-sdk-spacer-100, 32px);
1379
- --adyen-internal-spacer-110: var(--adyen-sdk-spacer-110, 40px);
1380
- --adyen-internal-spacer-120: var(--adyen-sdk-spacer-120, 48px);
1381
- --adyen-internal-spacer-130: var(--adyen-sdk-spacer-130, 56px);
1382
- --adyen-internal-spacer-140: var(--adyen-sdk-spacer-140, 64px);
1383
- --adyen-internal-spacer-000: var(--adyen-sdk-spacer-000, 0px);
1384
- --adyen-internal-spacer-010: var(--adyen-sdk-spacer-010, 2px);
1385
- --adyen-internal-spacer-020: var(--adyen-sdk-spacer-020, 4px);
1386
- --adyen-internal-spacer-030: var(--adyen-sdk-spacer-030, 6px);
1387
- --adyen-internal-spacer-040: var(--adyen-sdk-spacer-040, 8px);
1388
- --adyen-internal-spacer-050: var(--adyen-sdk-spacer-050, 10px);
1389
- --adyen-internal-spacer-060: var(--adyen-sdk-spacer-060, 12px);
1390
- --adyen-internal-spacer-070: var(--adyen-sdk-spacer-070, 16px);
1391
- --adyen-internal-spacer-080: var(--adyen-sdk-spacer-080, 20px);
1392
- --adyen-internal-spacer-090: var(--adyen-sdk-spacer-090, 24px);
1393
- --adyen-internal-media-query-xs-min: var(--adyen-sdk-media-query-xs-min, 0px);
1394
- --adyen-internal-media-query-xs-max: var(--adyen-sdk-media-query-xs-max, 375px);
1395
- --adyen-internal-media-query-s-min: var(--adyen-sdk-media-query-s-min, 376px);
1396
- --adyen-internal-media-query-s-max: var(--adyen-sdk-media-query-s-max, 499px);
1397
- --adyen-internal-media-query-m-min: var(--adyen-sdk-media-query-m-min, 500px);
1398
- --adyen-internal-media-query-m-max: var(--adyen-sdk-media-query-m-max, 767px);
1399
- --adyen-internal-media-query-l-min: var(--adyen-sdk-media-query-l-min, 768px);
1400
- --adyen-internal-media-query-l-max: var(--adyen-sdk-media-query-l-max, 1279px);
1401
- --adyen-internal-media-query-xl-min: var(--adyen-sdk-media-query-xl-min, 1280px);
1402
- --adyen-internal-media-query-xl-max: var(--adyen-sdk-media-query-xl-max, 1535px);
1403
- --adyen-internal-media-query-xxl: var(--adyen-sdk-media-query-xxl, 1536px);
1404
- --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));
1405
- --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));
1406
- --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));
1407
- --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));
1408
- --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));
1409
- --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));
1410
- --adyen-internal-border-radius-xs: var(--adyen-sdk-border-radius-xs, 2px);
1411
- --adyen-internal-border-radius-s: var(--adyen-sdk-border-radius-s, 4px);
1412
- --adyen-internal-border-radius-m: var(--adyen-sdk-border-radius-m, 8px);
1413
- --adyen-internal-border-radius-l: var(--adyen-sdk-border-radius-l, 12px);
1414
- --adyen-internal-border-radius-xl: var(--adyen-sdk-border-radius-xl, 24px);
1415
- --adyen-internal-border-width-s: var(--adyen-sdk-border-width-s, 1px);
1416
- --adyen-internal-border-width-m: var(--adyen-sdk-border-width-m, 2px);
1417
- --adyen-internal-border-width-l: var(--adyen-sdk-border-width-l, 3px);
1418
- --adyen-internal-border-width-attention: var(--adyen-sdk-border-width-attention, 1.5px);
1419
- --adyen-internal-z-index-global-screen: var(--adyen-sdk-z-index-global-screen, auto);
1420
- --adyen-internal-z-index-global-elevated: var(--adyen-sdk-z-index-global-elevated, 5);
1421
- --adyen-internal-z-index-global-navigation: var(--adyen-sdk-z-index-global-navigation, 10);
1422
- --adyen-internal-z-index-global-instant-interaction: var(--adyen-sdk-z-index-global-instant-interaction, 15);
1423
- --adyen-internal-z-index-local-tier-1: var(--adyen-sdk-z-index-local-tier-1, 1);
1424
- --adyen-internal-z-index-local-tier-2: var(--adyen-sdk-z-index-local-tier-2, 2);
1425
- --adyen-internal-z-index-local-tier-3: var(--adyen-sdk-z-index-local-tier-3, 3);
1426
- --adyen-internal-z-index-local-tier-4: var(--adyen-sdk-z-index-local-tier-4, 4);
1427
- /** Setting font-family by default to inherit, unless specified otherwise */
1428
- --adyen-internal-text-rich-text-code-font-family: var(
1429
- --adyen-sdk-text-rich-text-code-font-family,
1430
- inherit
1431
- );
1432
- --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, inherit);
1433
- --adyen-internal-text-caption-font-family-secondary: var(
1434
- --adyen-sdk-text-caption-font-family-secondary,
1435
- inherit
1436
- );
1437
- --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, inherit);
1438
- --adyen-internal-text-body-font-family-secondary: var(
1439
- --adyen-sdk-text-body-font-family-secondary,
1440
- inherit
1441
- );
1442
- --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, inherit);
1443
- --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, inherit);
1444
- --adyen-internal-text-title-font-family-secondary: var(
1445
- --adyen-sdk-text-title-font-family-secondary,
1446
- inherit
1447
- );
1448
- --adyen-internal-text-title-m-font-family: var(--adyen-sdk-text-title-m-font-family, inherit);
1449
- --adyen-internal-text-title-m-font-family-secondary: var(
1450
- --adyen-sdk-text-title-m-font-family-secondary,
1451
- inherit
1452
- );
1453
- --adyen-internal-text-title-l-font-family: var(--adyen-sdk-text-title-l-font-family, inherit);
1454
- --adyen-internal-text-title-l-font-family-secondary: var(
1455
- --adyen-sdk-text-title-l-font-family-secondary,
1456
- inherit
1457
- );
1458
- --adyen-internal-tap-target: 44px;
1459
- --adyen-internal-border-default-s: var(--adyen-internal-border-width-s) solid
1460
- var(--adyen-internal-color-outline-primary);
1461
- --adyen-internal-border-default-m: var(--adyen-internal-border-width-m) solid
1462
- var(--adyen-internal-color-outline-primary);
1463
- --adyen-internal-border-default-l: var(--adyen-internal-border-width-l) solid
1464
- var(--adyen-internal-color-outline-primary);
1157
+ .adyen-kyc-u-margin-top-8 {
1158
+ margin-top: var(--adyen-internal-spacer-040, 8px) !important;
1465
1159
  }
1466
1160
 
1467
- .adyen-kyc-u-screen-reader-only {
1468
- border: 0;
1469
- clip: rect(0, 0, 0, 0);
1470
- height: 1px;
1471
- overflow: hidden;
1472
- padding: 0 !important;
1473
- position: absolute;
1474
- white-space: nowrap;
1475
- width: 1px;
1161
+ .adyen-kyc-u-margin-x-8 {
1162
+ margin-left: var(--adyen-internal-spacer-040, 8px) !important;
1163
+ margin-right: var(--adyen-internal-spacer-040, 8px) !important;
1476
1164
  }
1477
1165
 
1478
- fieldset {
1479
- border: none;
1480
- padding: 0;
1481
- margin: 0;
1482
- }.adyen-kyc-checkbox__label {
1483
- color: var(--adyen-internal-color-label-primary, #001222);
1484
- cursor: pointer;
1485
- display: inline-block;
1486
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1487
- font-weight: var(--adyen-internal-text-body-font-weight, 400);
1488
- line-height: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
1489
- padding-left: var(--adyen-internal-spacer-090, 24px);
1490
- position: relative;
1491
- user-select: none;
1492
- width: calc(100% - 32px); /* leaves space for the error icon */
1166
+ .adyen-kyc-u-margin-y-8 {
1167
+ margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;
1168
+ margin-top: var(--adyen-internal-spacer-040, 8px) !important;
1493
1169
  }
1494
- .adyen-kyc-checkbox__helper-text {
1495
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1496
- display: block;
1497
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1498
- padding-left: var(--adyen-internal-spacer-090, 24px);
1170
+
1171
+ .adyen-kyc-u-margin-10 {
1172
+ margin: var(--adyen-internal-spacer-050, 10px) !important;
1499
1173
  }
1500
1174
 
1501
- .adyen-kyc-checkbox__input {
1502
- opacity: 0;
1503
- pointer-events: none;
1504
- position: absolute;
1175
+ .adyen-kyc-u-margin-bottom-10 {
1176
+ margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;
1505
1177
  }
1506
- .adyen-kyc-checkbox__input:focus-visible + .adyen-kyc-checkbox__label::after {
1507
- 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));
1508
- transition: var(--adyen-internal-animation-duration-fast, 100ms) var(--adyen-internal-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
1509
- transition-property: box-shadow;
1178
+
1179
+ .adyen-kyc-u-margin-left-10 {
1180
+ margin-left: var(--adyen-internal-spacer-050, 10px) !important;
1181
+ }
1182
+
1183
+ .adyen-kyc-u-margin-right-10 {
1184
+ margin-right: var(--adyen-internal-spacer-050, 10px) !important;
1185
+ }
1186
+
1187
+ .adyen-kyc-u-margin-top-10 {
1188
+ margin-top: var(--adyen-internal-spacer-050, 10px) !important;
1189
+ }
1190
+
1191
+ .adyen-kyc-u-margin-x-10 {
1192
+ margin-left: var(--adyen-internal-spacer-050, 10px) !important;
1193
+ margin-right: var(--adyen-internal-spacer-050, 10px) !important;
1194
+ }
1195
+
1196
+ .adyen-kyc-u-margin-y-10 {
1197
+ margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;
1198
+ margin-top: var(--adyen-internal-spacer-050, 10px) !important;
1199
+ }
1200
+
1201
+ .adyen-kyc-u-margin-12 {
1202
+ margin: var(--adyen-internal-spacer-060, 12px) !important;
1203
+ }
1204
+
1205
+ .adyen-kyc-u-margin-bottom-12 {
1206
+ margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;
1207
+ }
1208
+
1209
+ .adyen-kyc-u-margin-left-12 {
1210
+ margin-left: var(--adyen-internal-spacer-060, 12px) !important;
1211
+ }
1212
+
1213
+ .adyen-kyc-u-margin-right-12 {
1214
+ margin-right: var(--adyen-internal-spacer-060, 12px) !important;
1510
1215
  }
1511
- .adyen-kyc-checkbox__input:hover + .adyen-kyc-checkbox__label::after {
1512
- background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
1216
+
1217
+ .adyen-kyc-u-margin-top-12 {
1218
+ margin-top: var(--adyen-internal-spacer-060, 12px) !important;
1513
1219
  }
1514
- .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::before {
1515
- opacity: 1;
1220
+
1221
+ .adyen-kyc-u-margin-x-12 {
1222
+ margin-left: var(--adyen-internal-spacer-060, 12px) !important;
1223
+ margin-right: var(--adyen-internal-spacer-060, 12px) !important;
1516
1224
  }
1517
- .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::after {
1518
- background-color: var(--adyen-internal-color-background-inverse-primary, #001222);
1519
- border-color: var(--adyen-internal-color-background-inverse-primary, #001222);
1225
+
1226
+ .adyen-kyc-u-margin-y-12 {
1227
+ margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;
1228
+ margin-top: var(--adyen-internal-spacer-060, 12px) !important;
1520
1229
  }
1521
- .adyen-kyc-checkbox__input:checked:hover + .adyen-kyc-checkbox__label::after {
1522
- background-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
1523
- border-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
1230
+
1231
+ .adyen-kyc-u-margin-16 {
1232
+ margin: var(--adyen-internal-spacer-070, 16px) !important;
1524
1233
  }
1525
- .adyen-kyc-checkbox__input {
1526
- /* Check */
1234
+
1235
+ .adyen-kyc-u-margin-bottom-16 {
1236
+ margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;
1527
1237
  }
1528
- .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::before {
1529
- border-bottom: var(--adyen-internal-border-width-m, 2px) solid var(--adyen-internal-color-background-primary, #ffffff);
1530
- border-right: var(--adyen-internal-border-width-m, 2px) solid var(--adyen-internal-color-background-primary, #ffffff);
1531
- content: "";
1532
- height: 7px;
1533
- left: 3px;
1534
- opacity: 0;
1535
- position: absolute;
1536
- top: 4px;
1537
- transform: rotateZ(37deg);
1538
- transform-origin: 100% 100%;
1539
- width: 5px;
1540
- z-index: 1;
1238
+
1239
+ .adyen-kyc-u-margin-left-16 {
1240
+ margin-left: var(--adyen-internal-spacer-070, 16px) !important;
1541
1241
  }
1542
- .adyen-kyc-checkbox__input {
1543
- /* Box */
1242
+
1243
+ .adyen-kyc-u-margin-right-16 {
1244
+ margin-right: var(--adyen-internal-spacer-070, 16px) !important;
1544
1245
  }
1545
- .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::after {
1546
- background-color: var(--adyen-internal-color-background-primary, #ffffff);
1547
- border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary, #8c959d);
1548
- border-radius: var(--adyen-internal-border-radius-s, 4px);
1549
- content: "";
1550
- height: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
1551
- left: 0;
1552
- position: absolute;
1553
- top: 0;
1554
- width: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
1555
- z-index: 0;
1556
- }.adyen-kyc-field {
1557
- display: block;
1558
- margin-bottom: var(--adyen-internal-spacer-090, 24px);
1559
- width: 100%;
1246
+
1247
+ .adyen-kyc-u-margin-top-16 {
1248
+ margin-top: var(--adyen-internal-spacer-070, 16px) !important;
1560
1249
  }
1561
- .adyen-kyc-field--disabled {
1562
- color: var(--adyen-internal-color-label-disabled, #8c959d);
1563
- opacity: 0.5;
1564
- pointer-events: none;
1250
+
1251
+ .adyen-kyc-u-margin-x-16 {
1252
+ margin-left: var(--adyen-internal-spacer-070, 16px) !important;
1253
+ margin-right: var(--adyen-internal-spacer-070, 16px) !important;
1565
1254
  }
1566
1255
 
1567
- .adyen-kyc-optional-label {
1568
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1256
+ .adyen-kyc-u-margin-y-16 {
1257
+ margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;
1258
+ margin-top: var(--adyen-internal-spacer-070, 16px) !important;
1569
1259
  }
1570
1260
 
1571
- .adyen-kyc-label__text {
1572
- color: var(--adyen-internal-color-label-primary, #001222);
1573
- display: block;
1574
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1575
- font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);
1576
- transition: color 0.1s ease-out;
1261
+ .adyen-kyc-u-margin-20 {
1262
+ margin: var(--adyen-internal-spacer-080, 20px) !important;
1577
1263
  }
1578
1264
 
1579
- .adyen-kyc-helper-text {
1580
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1581
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
1582
- font-family: var(--adyen-internal-text-caption-font-family);
1583
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
1584
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
1585
- display: flex;
1586
- align-items: center;
1265
+ .adyen-kyc-u-margin-bottom-20 {
1266
+ margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;
1587
1267
  }
1588
- .adyen-kyc-helper-text__above {
1589
- margin-bottom: var(--adyen-internal-spacer-020, 4px);
1268
+
1269
+ .adyen-kyc-u-margin-left-20 {
1270
+ margin-left: var(--adyen-internal-spacer-080, 20px) !important;
1590
1271
  }
1591
- .adyen-kyc-helper-text__below {
1592
- margin-top: var(--adyen-internal-spacer-020, 4px);
1272
+
1273
+ .adyen-kyc-u-margin-right-20 {
1274
+ margin-right: var(--adyen-internal-spacer-080, 20px) !important;
1593
1275
  }
1594
- .adyen-kyc-helper-text__valid-format-check {
1595
- color: var(--adyen-internal-color-label-success, #008845);
1596
- font-size: var(--adyen-internal-text-title-font-size, 16px);
1597
- font-family: var(--adyen-internal-text-title-font-family);
1598
- font-weight: var(--adyen-internal-text-title-font-weight, 600);
1599
- line-height: var(--adyen-internal-text-title-line-height, 26px);
1600
- display: inline-flex;
1276
+
1277
+ .adyen-kyc-u-margin-top-20 {
1278
+ margin-top: var(--adyen-internal-spacer-080, 20px) !important;
1601
1279
  }
1602
1280
 
1603
- .adyen-kyc-label__text--error {
1604
- color: var(--adyen-internal-color-label-critical, #dc3801);
1281
+ .adyen-kyc-u-margin-x-20 {
1282
+ margin-left: var(--adyen-internal-spacer-080, 20px) !important;
1283
+ margin-right: var(--adyen-internal-spacer-080, 20px) !important;
1605
1284
  }
1606
1285
 
1607
- .adyen-kyc-error-text {
1608
- align-items: center;
1609
- color: var(--adyen-internal-color-label-critical, #dc3801);
1610
- display: flex;
1611
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
1612
- font-family: var(--adyen-internal-text-caption-font-family);
1613
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
1614
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
1615
- margin-top: var(--adyen-internal-spacer-020, 4px);
1616
- position: relative;
1286
+ .adyen-kyc-u-margin-y-20 {
1287
+ margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;
1288
+ margin-top: var(--adyen-internal-spacer-080, 20px) !important;
1617
1289
  }
1618
1290
 
1619
- .adyen-kyc-guidance-text {
1620
- align-items: center;
1621
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1622
- display: flex;
1623
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
1624
- font-family: var(--adyen-internal-text-caption-font-family);
1625
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
1626
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
1627
- margin-top: var(--adyen-internal-spacer-020, 4px);
1628
- position: relative;
1291
+ .adyen-kyc-u-margin-24 {
1292
+ margin: var(--adyen-internal-spacer-090, 24px) !important;
1629
1293
  }
1630
1294
 
1631
- .adyen-kyc-upload-field__guidance {
1632
- display: flex;
1633
- flex-direction: column;
1295
+ .adyen-kyc-u-margin-bottom-24 {
1296
+ margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;
1634
1297
  }
1635
- .adyen-kyc-upload-field__subtitle {
1636
- color: var(--adyen-internal-color-label-primary, #001222);
1637
- margin: var(--adyen-internal-spacer-070, 16px) var(--adyen-internal-spacer-000, 0px);
1298
+
1299
+ .adyen-kyc-u-margin-left-24 {
1300
+ margin-left: var(--adyen-internal-spacer-090, 24px) !important;
1638
1301
  }
1639
1302
 
1640
- .adyen-kyc-input-wrapper {
1641
- display: block;
1642
- position: relative;
1643
- margin-top: var(--adyen-internal-spacer-040, 8px);
1303
+ .adyen-kyc-u-margin-right-24 {
1304
+ margin-right: var(--adyen-internal-spacer-090, 24px) !important;
1644
1305
  }
1645
- .adyen-kyc-input-wrapper--block {
1646
- display: block;
1647
- }.adyen-kyc-loader-wrapper-loader {
1648
- display: none;
1649
- height: 100%;
1650
- left: 0;
1651
- position: absolute;
1652
- top: 0;
1653
- width: 100%;
1654
- z-index: 1;
1306
+
1307
+ .adyen-kyc-u-margin-top-24 {
1308
+ margin-top: var(--adyen-internal-spacer-090, 24px) !important;
1655
1309
  }
1656
1310
 
1657
- .adyen-kyc-loader-wrapper-loader-active {
1658
- display: block;
1311
+ .adyen-kyc-u-margin-x-24 {
1312
+ margin-left: var(--adyen-internal-spacer-090, 24px) !important;
1313
+ margin-right: var(--adyen-internal-spacer-090, 24px) !important;
1659
1314
  }
1660
- /* for container queries */
1661
- .adyen-kyc-modal {
1662
- background-color: var(--adyen-internal-color-background-modal);
1663
- border: var(--adyen-internal-spacer-000);
1664
- box-shadow: var(--adyen-internal-shadow-high);
1665
- display: flex;
1666
- flex-direction: column;
1667
- height: 100vh;
1668
- height: 100dvh;
1669
- max-height: unset;
1670
- max-width: unset;
1671
- overflow: hidden;
1672
- padding: var(--adyen-internal-spacer-000);
1673
- position: fixed;
1674
- width: 100vw;
1675
- width: 100dvw;
1315
+
1316
+ .adyen-kyc-u-margin-y-24 {
1317
+ margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;
1318
+ margin-top: var(--adyen-internal-spacer-090, 24px) !important;
1676
1319
  }
1677
- .adyen-kyc-modal:focus-visible {
1678
- outline: none;
1320
+
1321
+ .adyen-kyc-u-margin-32 {
1322
+ margin: var(--adyen-internal-spacer-100, 32px) !important;
1679
1323
  }
1680
- @media (min-width: 480px) {
1681
- .adyen-kyc-modal {
1682
- transition: max-height 400ms, max-width 400ms;
1683
- }
1324
+
1325
+ .adyen-kyc-u-margin-bottom-32 {
1326
+ margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;
1684
1327
  }
1685
1328
 
1686
- .adyen-kyc-modal-small {
1687
- border-radius: var(--adyen-internal-border-radius-l);
1688
- max-height: 80vh;
1689
- max-width: 400px;
1690
- width: 80vw;
1691
- height: fit-content;
1329
+ .adyen-kyc-u-margin-left-32 {
1330
+ margin-left: var(--adyen-internal-spacer-100, 32px) !important;
1692
1331
  }
1693
1332
 
1694
- @media (min-width: 480px) {
1695
- .adyen-kyc-modal-medium {
1696
- border-radius: var(--adyen-internal-border-radius-l);
1697
- height: 90vh;
1698
- max-height: 600px;
1699
- max-width: 600px;
1700
- width: 90vw;
1701
- }
1333
+ .adyen-kyc-u-margin-right-32 {
1334
+ margin-right: var(--adyen-internal-spacer-100, 32px) !important;
1702
1335
  }
1703
1336
 
1704
- @media (min-width: 480px) {
1705
- .adyen-kyc-modal-large {
1706
- border-radius: var(--adyen-internal-border-radius-l);
1707
- height: 90vh;
1708
- max-height: 900px;
1709
- max-width: 900px;
1710
- width: 90vw;
1711
- }
1337
+ .adyen-kyc-u-margin-top-32 {
1338
+ margin-top: var(--adyen-internal-spacer-100, 32px) !important;
1712
1339
  }
1713
1340
 
1714
- .adyen-kyc-modal-body {
1715
- display: flex;
1716
- flex-direction: column;
1717
- overflow-y: auto;
1718
- scrollbar-width: thin;
1341
+ .adyen-kyc-u-margin-x-32 {
1342
+ margin-left: var(--adyen-internal-spacer-100, 32px) !important;
1343
+ margin-right: var(--adyen-internal-spacer-100, 32px) !important;
1719
1344
  }
1720
1345
 
1721
- .adyen-kyc-modal-body-height {
1722
- height: 100%;
1346
+ .adyen-kyc-u-margin-y-32 {
1347
+ margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;
1348
+ margin-top: var(--adyen-internal-spacer-100, 32px) !important;
1723
1349
  }
1724
1350
 
1725
- .adyen-kyc-modal-accessable-title {
1726
- display: none;
1351
+ .adyen-kyc-u-margin-40 {
1352
+ margin: var(--adyen-internal-spacer-110, 40px) !important;
1727
1353
  }
1728
1354
 
1729
- .adyen-kyc-modal-transition-slide-in {
1730
- animation-name: adyen-kyc-slide-in;
1731
- animation-duration: 400ms;
1732
- animation-timing-function: ease-out;
1355
+ .adyen-kyc-u-margin-bottom-40 {
1356
+ margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;
1733
1357
  }
1734
1358
 
1735
- .adyen-kyc-modal-transition-drop-in {
1736
- animation-name: adyen-kyc-drop-in;
1737
- animation-duration: 250ms;
1738
- animation-timing-function: ease;
1359
+ .adyen-kyc-u-margin-left-40 {
1360
+ margin-left: var(--adyen-internal-spacer-110, 40px) !important;
1739
1361
  }
1740
1362
 
1741
- .adyen-kyc-modal-inset {
1742
- padding: var(--adyen-internal-spacer-140) var(--adyen-internal-spacer-070);
1363
+ .adyen-kyc-u-margin-right-40 {
1364
+ margin-right: var(--adyen-internal-spacer-110, 40px) !important;
1743
1365
  }
1744
- @media (min-width: 480px) {
1745
- .adyen-kyc-modal-inset {
1746
- padding-left: var(--adyen-internal-spacer-100);
1747
- padding-right: var(--adyen-internal-spacer-100);
1748
- }
1366
+
1367
+ .adyen-kyc-u-margin-top-40 {
1368
+ margin-top: var(--adyen-internal-spacer-110, 40px) !important;
1749
1369
  }
1750
- @media (min-width: 680px) {
1751
- .adyen-kyc-modal-inset {
1752
- padding-left: calc(var(--adyen-internal-spacer-070) * 2 + var(--adyen-internal-tap-target));
1753
- padding-right: calc(var(--adyen-internal-spacer-070) * 2 + var(--adyen-internal-tap-target));
1754
- }
1370
+
1371
+ .adyen-kyc-u-margin-x-40 {
1372
+ margin-left: var(--adyen-internal-spacer-110, 40px) !important;
1373
+ margin-right: var(--adyen-internal-spacer-110, 40px) !important;
1755
1374
  }
1756
1375
 
1757
- .adyen-kyc-modal::backdrop {
1758
- animation-name: adyen-kyc-backdrop-dissolve;
1759
- animation-duration: 400ms;
1760
- animation-timing-function: ease;
1761
- background-color: var(--adyen-internal-color-support-overlay);
1762
- opacity: 0.5;
1763
- backdrop-filter: blur(10px);
1376
+ .adyen-kyc-u-margin-y-40 {
1377
+ margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;
1378
+ margin-top: var(--adyen-internal-spacer-110, 40px) !important;
1764
1379
  }
1765
1380
 
1766
- .adyen-kyc-modal-button {
1767
- position: absolute;
1768
- top: var(--adyen-internal-spacer-070);
1769
- right: var(--adyen-internal-spacer-070);
1770
- z-index: 10;
1381
+ .adyen-kyc-u-margin-48 {
1382
+ margin: var(--adyen-internal-spacer-120, 48px) !important;
1771
1383
  }
1772
1384
 
1773
- @keyframes adyen-kyc-backdrop-dissolve {
1774
- 0% {
1775
- opacity: 0;
1776
- }
1777
- 100% {
1778
- opacity: 0.5;
1779
- backdrop-filter: blur(10px);
1780
- }
1385
+ .adyen-kyc-u-margin-bottom-48 {
1386
+ margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
1781
1387
  }
1782
- @keyframes adyen-kyc-slide-in {
1783
- 0% {
1784
- opacity: 0;
1785
- top: 64px;
1786
- }
1787
- 100% {
1788
- opacity: 1;
1789
- top: 0;
1790
- }
1388
+
1389
+ .adyen-kyc-u-margin-left-48 {
1390
+ margin-left: var(--adyen-internal-spacer-120, 48px) !important;
1791
1391
  }
1792
- @keyframes adyen-kyc-drop-in {
1793
- 0% {
1794
- opacity: 0;
1795
- transform: scale(1.2);
1796
- }
1797
- 100% {
1798
- opacity: 1;
1799
- transform: scale(1);
1800
- }
1392
+
1393
+ .adyen-kyc-u-margin-right-48 {
1394
+ margin-right: var(--adyen-internal-spacer-120, 48px) !important;
1801
1395
  }
1802
- .adyen-kyc-modal-header {
1803
- align-items: center;
1804
- display: flex;
1805
- font-size: var(--adyen-internal-text-title-font-size);
1806
- font-weight: var(--adyen-internal-text-title-font-weight);
1807
- gap: var(--adyen-internal-spacer-040);
1808
- justify-content: space-between;
1809
- padding: var(--adyen-internal-spacer-070);
1396
+
1397
+ .adyen-kyc-u-margin-top-48 {
1398
+ margin-top: var(--adyen-internal-spacer-120, 48px) !important;
1810
1399
  }
1811
1400
 
1812
- .adyen-kyc-modal-content {
1813
- flex-grow: 1;
1814
- overflow-y: auto;
1815
- padding: var(--adyen-internal-spacer-070);
1401
+ .adyen-kyc-u-margin-x-48 {
1402
+ margin-left: var(--adyen-internal-spacer-120, 48px) !important;
1403
+ margin-right: var(--adyen-internal-spacer-120, 48px) !important;
1816
1404
  }
1817
1405
 
1818
- .adyen-kyc-modal-footer {
1819
- align-items: center;
1820
- border-top: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-primary);
1821
- display: flex;
1822
- gap: var(--adyen-internal-spacer-040);
1823
- justify-content: flex-end;
1824
- padding: var(--adyen-internal-spacer-070);
1825
- }.adyen-kyc-progress-bar {
1826
- --adyen-progress-bar-size: 4px;
1827
- background-color: var(--adyen-internal-color-background-secondary);
1828
- height: var(--adyen-progress-bar-size);
1829
- overflow: hidden;
1406
+ .adyen-kyc-u-margin-y-48 {
1407
+ margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
1408
+ margin-top: var(--adyen-internal-spacer-120, 48px) !important;
1830
1409
  }
1831
1410
 
1832
- .adyen-kyc-progress-bar-rounded {
1833
- border-radius: calc(var(--adyen-progress-bar-size) / 2);
1411
+ /* for container queries */
1412
+ .adyen-kyc-u-width-full {
1413
+ width: 100% !important;
1834
1414
  }
1835
1415
 
1836
- .adyen-kyc-progress-bar-indicator {
1837
- background-color: var(--adyen-internal-color-background-inverse-primary);
1838
- text-indent: -1000%;
1839
- transition: width 400ms;
1840
- overflow: hidden;
1416
+ .adyen-kyc-u-width-half {
1417
+ width: 50% !important;
1841
1418
  }
1842
- /* for container queries */
1843
- .adyen-kyc-dropdown {
1844
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1845
- max-width: 100%;
1419
+
1420
+ /* Topmost/root container class */
1421
+ .adyen-kyc-ui-element-container-wrapper {
1846
1422
  width: 100%;
1423
+ overflow: auto;
1424
+ /**
1425
+ * main container query, used similarly to a @media query
1426
+ * considering our Component can be embedded in a container of arbitrary size
1427
+ * that does not necessarily match the whole window/screen size.
1428
+ * Uses s and l breakpoints defined in variables.
1429
+ */
1430
+ container-type: inline-size;
1431
+ container-name: main;
1847
1432
  }
1848
1433
 
1849
- .adyen-kyc-dropdown--minimal {
1850
- max-width: 120px;
1434
+ .adyen-kyc-ui-element-container-wrapper *,
1435
+ .adyen-kyc-ui-element-container-wrapper *::after,
1436
+ .adyen-kyc-ui-element-container-wrapper *::before {
1437
+ box-sizing: border-box;
1851
1438
  }
1852
1439
 
1853
- .adyen-kyc-dropdown-list {
1440
+ .adyen-kyc-ui-element-container {
1441
+ background-color: var(--adyen-internal-color-background-primary, #ffffff);
1442
+ position: relative;
1443
+ padding: var(--adyen-internal-spacer-100, 32px);
1854
1444
  border-radius: var(--adyen-internal-border-radius-m, 8px);
1855
- 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));
1856
- z-index: 2;
1445
+ font-family: var(--adyen-internal-text-body-font-family);
1446
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
1447
+ font-weight: var(--adyen-internal-text-body-font-weight, 400);
1448
+ line-height: var(--adyen-internal-text-body-line-height, 20px);
1449
+ color: var(--adyen-internal-color-label-primary, #001222);
1857
1450
  }
1858
- .adyen-kyc-dropdown-list .adyen-kyc-checkbox__helper-text {
1859
- cursor: pointer;
1451
+ .adyen-kyc-ui-element-container p,
1452
+ .adyen-kyc-ui-element-container ol,
1453
+ .adyen-kyc-ui-element-container ul {
1454
+ margin-bottom: 0;
1455
+ margin-top: 0;
1456
+ }
1457
+ .adyen-kyc-ui-element-container ul,
1458
+ .adyen-kyc-ui-element-container ol {
1459
+ padding-left: 1.5em;
1460
+ }
1461
+ @container main (max-width: 680px) {
1462
+ .adyen-kyc-ui-element-container {
1463
+ padding: var(--adyen-internal-spacer-070, 16px);
1464
+ }
1860
1465
  }
1861
1466
 
1862
- .adyen-kyc-dropdown-list--above {
1863
- bottom: -6px;
1467
+ /*
1468
+ * Compatibility later to ensure components do NOT receive extra padding
1469
+ * as is the case with dropins, without breaking dropins.
1470
+ * Once the Component Layout has been done \`.adyen-kyc-externalComponent\`
1471
+ * can be safely removed everywere.
1472
+ */
1473
+ .adyen-kyc-ui-element-container:has(.adyen-kyc-externalComponent) {
1474
+ padding: 0;
1864
1475
  }
1865
1476
 
1866
- .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
1867
- margin-top: var(--adyen-internal-spacer-010, 2px);
1477
+ /**
1478
+ * :root is needed for non-web components, while :host for web components (TODO: change on v4)
1479
+ *
1480
+ * This produces css like:
1481
+ * --adyen-internal-text-color: var(--adyen-sdk-text-color, #000);
1482
+ *
1483
+ * The \`internal\` part matches how we use css variables in the code
1484
+ * The \`sdk\` part is how consumers customize it from outside our code
1485
+ * The $value is the fallback bare value, used when the variable was not customized
1486
+ *
1487
+ * The reason we have \`internal\` and \`sdk\` is because doing something like:
1488
+ * --color: var(--color, #0f0) would create a loop, and the browser ignores it.
1489
+ *
1490
+ */
1491
+ :root,
1492
+ :host {
1493
+ --adyen-internal-animation-easing-standard: var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
1494
+ --adyen-internal-animation-easing-enter: var(--adyen-sdk-animation-easing-enter, cubic-bezier(0.12, 0.6, 0.4, 0.95));
1495
+ --adyen-internal-animation-easing-exit: var(--adyen-sdk-animation-easing-exit, cubic-bezier(0.4, 0, 1, 1));
1496
+ --adyen-internal-animation-easing-linear: var(--adyen-sdk-animation-easing-linear, linear);
1497
+ --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
1498
+ --adyen-internal-animation-duration-moderate: var(--adyen-sdk-animation-duration-moderate, 150ms);
1499
+ --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
1500
+ --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #ffffff);
1501
+ --adyen-internal-color-background-primary-hover: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);
1502
+ --adyen-internal-color-background-primary-active: var(--adyen-sdk-color-background-primary-active, #ecedef);
1503
+ --adyen-internal-color-background-secondary: var(--adyen-sdk-color-background-secondary, #f4f5f6);
1504
+ --adyen-internal-color-background-secondary-hover: var(--adyen-sdk-color-background-secondary-hover, #ecedef);
1505
+ --adyen-internal-color-background-secondary-active: var(--adyen-sdk-color-background-secondary-active, #e2e5e7);
1506
+ --adyen-internal-color-background-tertiary: var(--adyen-sdk-color-background-tertiary, #ecedef);
1507
+ --adyen-internal-color-background-tertiary-hover: var(--adyen-sdk-color-background-tertiary-hover, #e2e5e7);
1508
+ --adyen-internal-color-background-tertiary-active: var(--adyen-sdk-color-background-tertiary-active, #dadddf);
1509
+ --adyen-internal-color-background-quaternary: var(--adyen-sdk-color-background-quaternary, #c0c5ca);
1510
+ --adyen-internal-color-background-quaternary-hover: var(--adyen-sdk-color-background-quaternary-hover, #b7bdc2);
1511
+ --adyen-internal-color-background-quaternary-active: var(--adyen-sdk-color-background-quaternary-active, #aeb5ba);
1512
+ --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #ffffff);
1513
+ --adyen-internal-color-background-modal-hover: var(--adyen-sdk-color-background-modal-hover, #f4f5f6);
1514
+ --adyen-internal-color-background-modal-active: var(--adyen-sdk-color-background-modal-active, #ecedef);
1515
+ --adyen-internal-color-background-disabled: var(--adyen-sdk-color-background-disabled, #ecedef);
1516
+ --adyen-internal-color-background-selected: var(--adyen-sdk-color-background-selected, #e3effb);
1517
+ --adyen-internal-color-background-selected-hover: var(--adyen-sdk-color-background-selected-hover, #d4e6f9);
1518
+ --adyen-internal-color-background-selected-active: var(--adyen-sdk-color-background-selected-active, #c8dff7);
1519
+ --adyen-internal-color-background-spotlight: var(--adyen-sdk-color-background-spotlight, #ffe379);
1520
+ --adyen-internal-color-background-critical-weak: var(--adyen-sdk-color-background-critical-weak, #fff3ef);
1521
+ --adyen-internal-color-background-critical-strong: var(--adyen-sdk-color-background-critical-strong, #dc3801);
1522
+ --adyen-internal-color-background-critical-strong-hover: var(--adyen-sdk-color-background-critical-strong-hover, #c13101);
1523
+ --adyen-internal-color-background-critical-strong-active: var(--adyen-sdk-color-background-critical-strong-active, #751e00);
1524
+ --adyen-internal-color-background-warning-weak: var(--adyen-sdk-color-background-warning-weak, #fff4e5);
1525
+ --adyen-internal-color-background-warning-weak-hover: var(--adyen-sdk-color-background-warning-weak-hover, #ffecd0);
1526
+ --adyen-internal-color-background-warning-weak-active: var(--adyen-sdk-color-background-warning-weak-active, #ffe0b3);
1527
+ --adyen-internal-color-background-warning-strong: var(--adyen-sdk-color-background-warning-strong, #d77f00);
1528
+ --adyen-internal-color-background-success-weak: var(--adyen-sdk-color-background-success-weak, #e4faef);
1529
+ --adyen-internal-color-background-success-strong: var(--adyen-sdk-color-background-success-strong, #008845);
1530
+ --adyen-internal-color-background-highlight-weak: var(--adyen-sdk-color-background-highlight-weak, #f0f6fd);
1531
+ --adyen-internal-color-background-highlight-strong: var(--adyen-sdk-color-background-highlight-strong, #0f75dc);
1532
+ --adyen-internal-color-background-inverse-primary: var(--adyen-sdk-color-background-inverse-primary, #001222);
1533
+ --adyen-internal-color-background-inverse-primary-hover: var(--adyen-sdk-color-background-inverse-primary-hover, #5c6874);
1534
+ --adyen-internal-color-background-inverse-primary-active: var(--adyen-sdk-color-background-inverse-primary-active, #6c7782);
1535
+ --adyen-internal-color-background-inverse-secondary: var(--adyen-sdk-color-background-inverse-secondary, #1a2b3b);
1536
+ --adyen-internal-color-background-inverse-secondary-hover: var(--adyen-sdk-color-background-inverse-secondary-hover, #273746);
1537
+ --adyen-internal-color-background-inverse-secondary-active: var(--adyen-sdk-color-background-inverse-secondary-active, #364553);
1538
+ --adyen-internal-color-background-inverse-disabled: var(--adyen-sdk-color-background-inverse-disabled, #273746);
1539
+ --adyen-internal-color-background-inverse-critical-weak: var(--adyen-sdk-color-background-inverse-critical-weak, #5c1800);
1540
+ --adyen-internal-color-background-inverse-critical-strong: var(--adyen-sdk-color-background-inverse-critical-strong, #ff9a78);
1541
+ --adyen-internal-color-background-inverse-critical-strong-hover: var(--adyen-sdk-color-background-inverse-critical-strong-hover, #ffbda6);
1542
+ --adyen-internal-color-background-inverse-critical-strong-active: var(--adyen-sdk-color-background-inverse-critical-strong-active, #ffded3);
1543
+ --adyen-internal-color-background-always-light: var(--adyen-sdk-color-background-always-light, #ffffff);
1544
+ --adyen-internal-color-background-always-light-hover: var(--adyen-sdk-color-background-always-light-hover, #f4f5f6);
1545
+ --adyen-internal-color-background-always-light-active: var(--adyen-sdk-color-background-always-light-active, #ecedef);
1546
+ --adyen-internal-color-background-always-light-disabled: var(--adyen-sdk-color-background-always-light-disabled, #ecedef);
1547
+ --adyen-internal-color-background-always-light-selected: var(--adyen-sdk-color-background-always-light-selected, #e3effb);
1548
+ --adyen-internal-color-background-always-dark: var(--adyen-sdk-color-background-always-dark, #001222);
1549
+ --adyen-internal-color-background-always-dark-hover: var(--adyen-sdk-color-background-always-dark-hover, #5c6874);
1550
+ --adyen-internal-color-background-always-dark-active: var(--adyen-sdk-color-background-always-dark-active, #8c959d);
1551
+ --adyen-internal-color-background-always-dark-disabled: var(--adyen-sdk-color-background-always-dark-disabled, #ecedef);
1552
+ --adyen-internal-color-background-always-dark-selected: var(--adyen-sdk-color-background-always-dark-selected, #00305f);
1553
+ --adyen-internal-color-background-always-dark-primary: var(--adyen-sdk-color-background-always-dark-primary, #001222);
1554
+ --adyen-internal-color-background-always-dark-primary-hover: var(--adyen-sdk-color-background-always-dark-primary-hover, #132434);
1555
+ --adyen-internal-color-background-always-dark-primary-active: var(--adyen-sdk-color-background-always-dark-primary-active, #213140);
1556
+ --adyen-internal-color-background-always-dark-primary-disabled: var(--adyen-sdk-color-background-always-dark-primary-disabled, #ecedef);
1557
+ --adyen-internal-color-background-always-dark-primary-selected: var(--adyen-sdk-color-background-always-dark-primary-selected, #00305f);
1558
+ --adyen-internal-color-background-always-dark-secondary: var(--adyen-sdk-color-background-always-dark-secondary, #213140);
1559
+ --adyen-internal-color-background-always-dark-secondary-hover: var(--adyen-sdk-color-background-always-dark-secondary-hover, #364553);
1560
+ --adyen-internal-color-background-always-dark-secondary-active: var(--adyen-sdk-color-background-always-dark-secondary-active, #455460);
1561
+ --adyen-internal-color-background-always-dark-secondary-disabled: var(--adyen-sdk-color-background-always-dark-secondary-disabled, #ecedef);
1562
+ --adyen-internal-color-background-always-dark-secondary-selected: var(--adyen-sdk-color-background-always-dark-secondary-selected, #00305f);
1563
+ --adyen-internal-color-background-always-dark-tertiary: var(--adyen-sdk-color-background-always-dark-tertiary, #2f3e4d);
1564
+ --adyen-internal-color-background-always-dark-tertiary-hover: var(--adyen-sdk-color-background-always-dark-tertiary-hover, #3d4c5a);
1565
+ --adyen-internal-color-background-always-dark-tertiary-active: var(--adyen-sdk-color-background-always-dark-tertiary-active, #455460);
1566
+ --adyen-internal-color-background-always-dark-tertiary-disabled: var(--adyen-sdk-color-background-always-dark-tertiary-disabled, #ecedef);
1567
+ --adyen-internal-color-background-always-dark-tertiary-selected: var(--adyen-sdk-color-background-always-dark-tertiary-selected, #00305f);
1568
+ --adyen-internal-color-label-primary: var(--adyen-sdk-color-label-primary, #001222);
1569
+ --adyen-internal-color-label-primary-hover: var(--adyen-sdk-color-label-primary-hover, #5c6874);
1570
+ --adyen-internal-color-label-primary-active: var(--adyen-sdk-color-label-primary-active, #6c7782);
1571
+ --adyen-internal-color-label-secondary: var(--adyen-sdk-color-label-secondary, #5c6874);
1572
+ --adyen-internal-color-label-tertiary: var(--adyen-sdk-color-label-tertiary, #8c959d);
1573
+ --adyen-internal-color-label-disabled: var(--adyen-sdk-color-label-disabled, #8c959d);
1574
+ --adyen-internal-color-label-critical: var(--adyen-sdk-color-label-critical, #dc3801);
1575
+ --adyen-internal-color-label-critical-hover: var(--adyen-sdk-color-label-critical-hover, #c13101);
1576
+ --adyen-internal-color-label-critical-active: var(--adyen-sdk-color-label-critical-active, #751e00);
1577
+ --adyen-internal-color-label-warning: var(--adyen-sdk-color-label-warning, #ab6600);
1578
+ --adyen-internal-color-label-highlight: var(--adyen-sdk-color-label-highlight, #0f75dc);
1579
+ --adyen-internal-color-label-success: var(--adyen-sdk-color-label-success, #008845);
1580
+ --adyen-internal-color-label-on-color: var(--adyen-sdk-color-label-on-color, #ffffff);
1581
+ --adyen-internal-color-label-inverse-primary: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
1582
+ --adyen-internal-color-label-inverse-primary-hover: var(--adyen-sdk-color-label-inverse-primary-hover, #f4f5f6);
1583
+ --adyen-internal-color-label-inverse-primary-active: var(--adyen-sdk-color-label-inverse-primary-active, #ecedef);
1584
+ --adyen-internal-color-label-inverse-secondary: var(--adyen-sdk-color-label-inverse-secondary, #9da5ac);
1585
+ --adyen-internal-color-label-inverse-disabled: var(--adyen-sdk-color-label-inverse-disabled, #737e88);
1586
+ --adyen-internal-color-label-inverse-critical: var(--adyen-sdk-color-label-inverse-critical, #ff9a78);
1587
+ --adyen-internal-color-label-inverse-critical-hover: var(--adyen-sdk-color-label-inverse-critical-hover, #ffbda6);
1588
+ --adyen-internal-color-label-inverse-critical-active: var(--adyen-sdk-color-label-inverse-critical-active, #ffded3);
1589
+ --adyen-internal-color-label-on-background-critical-weak: var(--adyen-sdk-color-label-on-background-critical-weak, #c13101);
1590
+ --adyen-internal-color-label-on-background-warning-weak: var(--adyen-sdk-color-label-on-background-warning-weak, #955900);
1591
+ --adyen-internal-color-label-on-background-success-weak: var(--adyen-sdk-color-label-on-background-success-weak, #00773c);
1592
+ --adyen-internal-color-label-on-background-highlight-weak: var(--adyen-sdk-color-label-on-background-highlight-weak, #0065c9);
1593
+ --adyen-internal-color-label-always-light: var(--adyen-sdk-color-label-always-light, #ffffff);
1594
+ --adyen-internal-color-label-always-light-primary: var(--adyen-sdk-color-label-always-light-primary, #ecedef);
1595
+ --adyen-internal-color-label-always-light-primary-hover: var(--adyen-sdk-color-label-always-light-primary-hover, #c8ccd0);
1596
+ --adyen-internal-color-label-always-light-primary-active: var(--adyen-sdk-color-label-always-light-primary-active, #959da5);
1597
+ --adyen-internal-color-label-always-light-secondary: var(--adyen-sdk-color-label-always-light-secondary, #a6adb3);
1598
+ --adyen-internal-color-label-always-light-secondary-hover: var(--adyen-sdk-color-label-always-light-secondary-hover, #959da5);
1599
+ --adyen-internal-color-label-always-light-secondary-active: var(--adyen-sdk-color-label-always-light-secondary-active, #737e88);
1600
+ --adyen-internal-color-label-always-light-tertiary: var(--adyen-sdk-color-label-always-light-tertiary, #848d96);
1601
+ --adyen-internal-color-label-always-light-tertiary-hover: var(--adyen-sdk-color-label-always-light-tertiary-hover, #737e88);
1602
+ --adyen-internal-color-label-always-light-tertiary-active: var(--adyen-sdk-color-label-always-light-tertiary-active, #54616d);
1603
+ --adyen-internal-color-label-always-dark: var(--adyen-sdk-color-label-always-dark, #001222);
1604
+ --adyen-internal-color-link-primary: var(--adyen-sdk-color-link-primary, #0065c9);
1605
+ --adyen-internal-color-link-primary-hover: var(--adyen-sdk-color-link-primary-hover, #0f75dc);
1606
+ --adyen-internal-color-link-primary-active: var(--adyen-sdk-color-link-primary-active, #0f75dc);
1607
+ --adyen-internal-color-link-primary-disabled: var(--adyen-sdk-color-link-primary-disabled, #8c959d);
1608
+ --adyen-internal-color-link-primary-visited: var(--adyen-sdk-color-link-primary-visited, #540884);
1609
+ --adyen-internal-color-link-primary-visited-hover: var(--adyen-sdk-color-link-primary-visited-hover, #710ab3);
1610
+ --adyen-internal-color-link-primary-visited-active: var(--adyen-sdk-color-link-primary-visited-active, #710ab3);
1611
+ --adyen-internal-color-link-quiet: var(--adyen-sdk-color-link-quiet, #001222);
1612
+ --adyen-internal-color-link-quiet-hover: var(--adyen-sdk-color-link-quiet-hover, #5c6874);
1613
+ --adyen-internal-color-link-quiet-active: var(--adyen-sdk-color-link-quiet-active, #5c6874);
1614
+ --adyen-internal-color-link-quiet-disabled: var(--adyen-sdk-color-link-quiet-disabled, #8c959d);
1615
+ --adyen-internal-color-outline-primary: var(--adyen-sdk-color-outline-primary, #dadddf);
1616
+ --adyen-internal-color-outline-primary-hover: var(--adyen-sdk-color-outline-primary-hover, #c8ccd0);
1617
+ --adyen-internal-color-outline-primary-active: var(--adyen-sdk-color-outline-primary-active, #001222);
1618
+ --adyen-internal-color-outline-secondary: var(--adyen-sdk-color-outline-secondary, #c8ccd0);
1619
+ --adyen-internal-color-outline-secondary-hover: var(--adyen-sdk-color-outline-secondary-hover, #b7bdc2);
1620
+ --adyen-internal-color-outline-secondary-active: var(--adyen-sdk-color-outline-secondary-active, #001222);
1621
+ --adyen-internal-color-outline-tertiary: var(--adyen-sdk-color-outline-tertiary, #8c959d);
1622
+ --adyen-internal-color-outline-tertiary-hover: var(--adyen-sdk-color-outline-tertiary-hover, #6c7782);
1623
+ --adyen-internal-color-outline-tertiary-active: var(--adyen-sdk-color-outline-tertiary-active, #001222);
1624
+ --adyen-internal-color-outline-disabled: var(--adyen-sdk-color-outline-disabled, #dadddf);
1625
+ --adyen-internal-color-outline-selected: var(--adyen-sdk-color-outline-selected, #001222);
1626
+ --adyen-internal-color-outline-critical: var(--adyen-sdk-color-outline-critical, #dc3801);
1627
+ --adyen-internal-color-outline-critical-hover: var(--adyen-sdk-color-outline-critical-hover, #c13101);
1628
+ --adyen-internal-color-outline-critical-active: var(--adyen-sdk-color-outline-critical-active, #751e00);
1629
+ --adyen-internal-color-outline-success: var(--adyen-sdk-color-outline-success, #008845);
1630
+ --adyen-internal-color-outline-success-hover: var(--adyen-sdk-color-outline-success-hover, #00773c);
1631
+ --adyen-internal-color-outline-success-active: var(--adyen-sdk-color-outline-success-active, #004724);
1632
+ --adyen-internal-color-outline-inverse-primary: var(--adyen-sdk-color-outline-inverse-primary, #2f3e4d);
1633
+ --adyen-internal-color-outline-inverse-primary-hover: var(--adyen-sdk-color-outline-inverse-primary-hover, #6c7782);
1634
+ --adyen-internal-color-outline-inverse-primary-active: var(--adyen-sdk-color-outline-inverse-primary-active, #9da5ac);
1635
+ --adyen-internal-color-outline-inverse-disabled: var(--adyen-sdk-color-outline-inverse-disabled, #455460);
1636
+ --adyen-internal-color-outline-inverse-critical: var(--adyen-sdk-color-outline-inverse-critical, #ff9a78);
1637
+ --adyen-internal-color-outline-inverse-critical-hover: var(--adyen-sdk-color-outline-inverse-critical-hover, #ffbda6);
1638
+ --adyen-internal-color-outline-inverse-critical-active: var(--adyen-sdk-color-outline-inverse-critical-active, #ffded3);
1639
+ --adyen-internal-color-separator-primary: var(--adyen-sdk-color-separator-primary, #dadddf);
1640
+ --adyen-internal-color-separator-secondary: var(--adyen-sdk-color-separator-secondary, #c8ccd0);
1641
+ --adyen-internal-color-separator-inverse-primary: var(--adyen-sdk-color-separator-inverse-primary, #2f3e4d);
1642
+ --adyen-internal-color-separator-inverse-secondary: var(--adyen-sdk-color-separator-inverse-secondary, #5c6874);
1643
+ --adyen-internal-color-decorative-green: var(--adyen-sdk-color-decorative-green, #00d16a);
1644
+ --adyen-internal-color-decorative-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
1645
+ --adyen-internal-color-decorative-yellow: var(--adyen-sdk-color-decorative-yellow, #f9c500);
1646
+ --adyen-internal-color-decorative-orange: var(--adyen-sdk-color-decorative-orange, #f99300);
1647
+ --adyen-internal-color-decorative-red: var(--adyen-sdk-color-decorative-red, #f73f01);
1648
+ --adyen-internal-color-decorative-grey: var(--adyen-sdk-color-decorative-grey, #848d96);
1649
+ --adyen-internal-color-support-overlay: var(--adyen-sdk-color-support-overlay, #001222);
1650
+ --adyen-internal-color-support-shadow: var(--adyen-sdk-color-support-shadow, #001222);
1651
+ --adyen-internal-text-font-variant-numeric: var(--adyen-sdk-text-font-variant-numeric, normal);
1652
+ --adyen-internal-text-rich-text-heading-margin: var(--adyen-sdk-text-rich-text-heading-margin, 32px 0 10px 0);
1653
+ --adyen-internal-text-rich-text-heading-font-weight: var(--adyen-sdk-text-rich-text-heading-font-weight, 700);
1654
+ --adyen-internal-text-rich-text-paragraph-margin: var(--adyen-sdk-text-rich-text-paragraph-margin, 0 0 8px 0);
1655
+ --adyen-internal-text-rich-text-list-padding-left: var(--adyen-sdk-text-rich-text-list-padding-left, 20px);
1656
+ --adyen-internal-text-rich-text-list-margin: var(--adyen-sdk-text-rich-text-list-margin, 0 0 4px 0);
1657
+ --adyen-internal-text-rich-text-code-background-color: var(--adyen-sdk-text-rich-text-code-background-color, #f4f5f6);
1658
+ --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);
1659
+ --adyen-internal-text-rich-text-code-font-weight: var(--adyen-sdk-text-rich-text-code-font-weight, 500);
1660
+ --adyen-internal-text-rich-text-pre-margin: var(--adyen-sdk-text-rich-text-pre-margin, 16px 0 16px 0);
1661
+ --adyen-internal-text-rich-text-pre-padding: var(--adyen-sdk-text-rich-text-pre-padding, 10px 16px);
1662
+ --adyen-internal-text-rich-text-pre-line-height: var(--adyen-sdk-text-rich-text-pre-line-height, 24px);
1663
+ --adyen-internal-text-rich-text-mark-background-color: var(--adyen-sdk-text-rich-text-mark-background-color, #f0f6fd);
1664
+ --adyen-internal-text-rich-text-blockquote-font-weight: var(--adyen-sdk-text-rich-text-blockquote-font-weight, 500);
1665
+ --adyen-internal-text-rich-text-blockquote-margin: var(--adyen-sdk-text-rich-text-blockquote-margin, 16px 0 16px 16px);
1666
+ --adyen-internal-text-rich-text-table-border: var(--adyen-sdk-text-rich-text-table-border, 1px solid #dadddf);
1667
+ --adyen-internal-text-rich-text-table-line-height: var(--adyen-sdk-text-rich-text-table-line-height, 20px);
1668
+ --adyen-internal-text-rich-text-table-margin: var(--adyen-sdk-text-rich-text-table-margin, 16px 0 16px 0);
1669
+ --adyen-internal-text-rich-text-table-padding: var(--adyen-sdk-text-rich-text-table-padding, 10px 16px);
1670
+ --adyen-internal-text-rich-text-table-header-font-weight: var(--adyen-sdk-text-rich-text-table-header-font-weight, 700);
1671
+ --adyen-internal-text-rich-text-table-caption-line-height: var(--adyen-sdk-text-rich-text-table-caption-line-height, 20px);
1672
+ --adyen-internal-text-rich-text-table-caption-margin: var(--adyen-sdk-text-rich-text-table-caption-margin, 0 0 6px 0);
1673
+ --adyen-internal-text-rich-text-caption-paragraph-margin: var(--adyen-sdk-text-rich-text-caption-paragraph-margin, 0 0 6px 0);
1674
+ --adyen-internal-text-rich-text-caption-list-padding-left: var(--adyen-sdk-text-rich-text-caption-list-padding-left, 16px);
1675
+ --adyen-internal-text-rich-text-caption-list-margin: var(--adyen-sdk-text-rich-text-caption-list-margin, 0 0 2px 0);
1676
+ --adyen-internal-text-rich-text-caption-blockquote-margin: var(--adyen-sdk-text-rich-text-caption-blockquote-margin, 12px 0 12px 16px);
1677
+ --adyen-internal-text-rich-text-caption-pre-line-height: var(--adyen-sdk-text-rich-text-caption-pre-line-height, 20px);
1678
+ --adyen-internal-text-rich-text-caption-table-padding: var(--adyen-sdk-text-rich-text-caption-table-padding, 8px 12px);
1679
+ --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1680
+ --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);
1681
+ --adyen-internal-text-caption-font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1682
+ --adyen-internal-text-caption-font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
1683
+ --adyen-internal-text-caption-line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1684
+ --adyen-internal-text-caption-letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
1685
+ --adyen-internal-text-caption-wide-line-height: var(--adyen-sdk-text-caption-wide-line-height, 20px);
1686
+ --adyen-internal-text-caption-stronger-font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
1687
+ --adyen-internal-text-caption-stronger-wide-font-weight: var(--adyen-sdk-text-caption-stronger-wide-font-weight, 500);
1688
+ --adyen-internal-text-caption-stronger-wide-line-height: var(--adyen-sdk-text-caption-stronger-wide-line-height, 20px);
1689
+ --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1690
+ --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);
1691
+ --adyen-internal-text-body-font-size: var(--adyen-sdk-text-body-font-size, 14px);
1692
+ --adyen-internal-text-body-font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1693
+ --adyen-internal-text-body-line-height: var(--adyen-sdk-text-body-line-height, 20px);
1694
+ --adyen-internal-text-body-letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
1695
+ --adyen-internal-text-body-wide-line-height: var(--adyen-sdk-text-body-wide-line-height, 24px);
1696
+ --adyen-internal-text-body-stronger-font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
1697
+ --adyen-internal-text-body-stronger-wide-font-weight: var(--adyen-sdk-text-body-stronger-wide-font-weight, 500);
1698
+ --adyen-internal-text-body-stronger-wide-line-height: var(--adyen-sdk-text-body-stronger-wide-line-height, 24px);
1699
+ --adyen-internal-text-body-strongest-font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
1700
+ --adyen-internal-text-body-strongest-wide-font-weight: var(--adyen-sdk-text-body-strongest-wide-font-weight, 600);
1701
+ --adyen-internal-text-body-strongest-wide-line-height: var(--adyen-sdk-text-body-strongest-wide-line-height, 24px);
1702
+ --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1703
+ --adyen-internal-text-subtitle-font-size: var(--adyen-sdk-text-subtitle-font-size, 16px);
1704
+ --adyen-internal-text-subtitle-font-weight: var(--adyen-sdk-text-subtitle-font-weight, 500);
1705
+ --adyen-internal-text-subtitle-line-height: var(--adyen-sdk-text-subtitle-line-height, 26px);
1706
+ --adyen-internal-text-subtitle-letter-spacing: var(--adyen-sdk-text-subtitle-letter-spacing, 0);
1707
+ --adyen-internal-text-subtitle-stronger-font-weight: var(--adyen-sdk-text-subtitle-stronger-font-weight, 600);
1708
+ --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1709
+ --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);
1710
+ --adyen-internal-text-title-font-size: var(--adyen-sdk-text-title-font-size, 16px);
1711
+ --adyen-internal-text-title-font-weight: var(--adyen-sdk-text-title-font-weight, 600);
1712
+ --adyen-internal-text-title-line-height: var(--adyen-sdk-text-title-line-height, 26px);
1713
+ --adyen-internal-text-title-letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
1714
+ --adyen-internal-text-title-mobile-font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
1715
+ --adyen-internal-text-title-mobile-line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
1716
+ --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);
1717
+ --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);
1718
+ --adyen-internal-text-title-m-font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
1719
+ --adyen-internal-text-title-m-font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
1720
+ --adyen-internal-text-title-m-line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
1721
+ --adyen-internal-text-title-m-letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
1722
+ --adyen-internal-text-title-m-mobile-font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
1723
+ --adyen-internal-text-title-m-mobile-line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
1724
+ --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);
1725
+ --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);
1726
+ --adyen-internal-text-title-l-font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
1727
+ --adyen-internal-text-title-l-font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
1728
+ --adyen-internal-text-title-l-line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
1729
+ --adyen-internal-text-title-l-letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
1730
+ --adyen-internal-text-title-l-mobile-font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
1731
+ --adyen-internal-text-title-l-mobile-line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
1732
+ --adyen-internal-focus-ring-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
1733
+ --adyen-internal-focus-ring-spacer: var(--adyen-sdk-focus-ring-spacer, 1px);
1734
+ --adyen-internal-focus-ring-outline: var(--adyen-sdk-focus-ring-outline, 3px);
1735
+ --adyen-internal-spacer-100: var(--adyen-sdk-spacer-100, 32px);
1736
+ --adyen-internal-spacer-110: var(--adyen-sdk-spacer-110, 40px);
1737
+ --adyen-internal-spacer-120: var(--adyen-sdk-spacer-120, 48px);
1738
+ --adyen-internal-spacer-130: var(--adyen-sdk-spacer-130, 56px);
1739
+ --adyen-internal-spacer-140: var(--adyen-sdk-spacer-140, 64px);
1740
+ --adyen-internal-spacer-000: var(--adyen-sdk-spacer-000, 0px);
1741
+ --adyen-internal-spacer-010: var(--adyen-sdk-spacer-010, 2px);
1742
+ --adyen-internal-spacer-020: var(--adyen-sdk-spacer-020, 4px);
1743
+ --adyen-internal-spacer-030: var(--adyen-sdk-spacer-030, 6px);
1744
+ --adyen-internal-spacer-040: var(--adyen-sdk-spacer-040, 8px);
1745
+ --adyen-internal-spacer-050: var(--adyen-sdk-spacer-050, 10px);
1746
+ --adyen-internal-spacer-060: var(--adyen-sdk-spacer-060, 12px);
1747
+ --adyen-internal-spacer-070: var(--adyen-sdk-spacer-070, 16px);
1748
+ --adyen-internal-spacer-080: var(--adyen-sdk-spacer-080, 20px);
1749
+ --adyen-internal-spacer-090: var(--adyen-sdk-spacer-090, 24px);
1750
+ --adyen-internal-media-query-xs-min: var(--adyen-sdk-media-query-xs-min, 0px);
1751
+ --adyen-internal-media-query-xs-max: var(--adyen-sdk-media-query-xs-max, 375px);
1752
+ --adyen-internal-media-query-s-min: var(--adyen-sdk-media-query-s-min, 376px);
1753
+ --adyen-internal-media-query-s-max: var(--adyen-sdk-media-query-s-max, 499px);
1754
+ --adyen-internal-media-query-m-min: var(--adyen-sdk-media-query-m-min, 500px);
1755
+ --adyen-internal-media-query-m-max: var(--adyen-sdk-media-query-m-max, 767px);
1756
+ --adyen-internal-media-query-l-min: var(--adyen-sdk-media-query-l-min, 768px);
1757
+ --adyen-internal-media-query-l-max: var(--adyen-sdk-media-query-l-max, 1279px);
1758
+ --adyen-internal-media-query-xl-min: var(--adyen-sdk-media-query-xl-min, 1280px);
1759
+ --adyen-internal-media-query-xl-max: var(--adyen-sdk-media-query-xl-max, 1535px);
1760
+ --adyen-internal-media-query-xxl: var(--adyen-sdk-media-query-xxl, 1536px);
1761
+ --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));
1762
+ --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));
1763
+ --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));
1764
+ --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));
1765
+ --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));
1766
+ --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));
1767
+ --adyen-internal-border-radius-xs: var(--adyen-sdk-border-radius-xs, 2px);
1768
+ --adyen-internal-border-radius-s: var(--adyen-sdk-border-radius-s, 4px);
1769
+ --adyen-internal-border-radius-m: var(--adyen-sdk-border-radius-m, 8px);
1770
+ --adyen-internal-border-radius-l: var(--adyen-sdk-border-radius-l, 12px);
1771
+ --adyen-internal-border-radius-xl: var(--adyen-sdk-border-radius-xl, 24px);
1772
+ --adyen-internal-border-width-s: var(--adyen-sdk-border-width-s, 1px);
1773
+ --adyen-internal-border-width-m: var(--adyen-sdk-border-width-m, 2px);
1774
+ --adyen-internal-border-width-l: var(--adyen-sdk-border-width-l, 3px);
1775
+ --adyen-internal-border-width-attention: var(--adyen-sdk-border-width-attention, 1.5px);
1776
+ --adyen-internal-z-index-global-screen: var(--adyen-sdk-z-index-global-screen, auto);
1777
+ --adyen-internal-z-index-global-elevated: var(--adyen-sdk-z-index-global-elevated, 5);
1778
+ --adyen-internal-z-index-global-navigation: var(--adyen-sdk-z-index-global-navigation, 10);
1779
+ --adyen-internal-z-index-global-instant-interaction: var(--adyen-sdk-z-index-global-instant-interaction, 15);
1780
+ --adyen-internal-z-index-local-tier-1: var(--adyen-sdk-z-index-local-tier-1, 1);
1781
+ --adyen-internal-z-index-local-tier-2: var(--adyen-sdk-z-index-local-tier-2, 2);
1782
+ --adyen-internal-z-index-local-tier-3: var(--adyen-sdk-z-index-local-tier-3, 3);
1783
+ --adyen-internal-z-index-local-tier-4: var(--adyen-sdk-z-index-local-tier-4, 4);
1784
+ /** Setting font-family by default to inherit, unless specified otherwise */
1785
+ --adyen-internal-text-rich-text-code-font-family: var(
1786
+ --adyen-sdk-text-rich-text-code-font-family,
1787
+ inherit
1788
+ );
1789
+ --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, inherit);
1790
+ --adyen-internal-text-caption-font-family-secondary: var(
1791
+ --adyen-sdk-text-caption-font-family-secondary,
1792
+ inherit
1793
+ );
1794
+ --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, inherit);
1795
+ --adyen-internal-text-body-font-family-secondary: var(
1796
+ --adyen-sdk-text-body-font-family-secondary,
1797
+ inherit
1798
+ );
1799
+ --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, inherit);
1800
+ --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, inherit);
1801
+ --adyen-internal-text-title-font-family-secondary: var(
1802
+ --adyen-sdk-text-title-font-family-secondary,
1803
+ inherit
1804
+ );
1805
+ --adyen-internal-text-title-m-font-family: var(--adyen-sdk-text-title-m-font-family, inherit);
1806
+ --adyen-internal-text-title-m-font-family-secondary: var(
1807
+ --adyen-sdk-text-title-m-font-family-secondary,
1808
+ inherit
1809
+ );
1810
+ --adyen-internal-text-title-l-font-family: var(--adyen-sdk-text-title-l-font-family, inherit);
1811
+ --adyen-internal-text-title-l-font-family-secondary: var(
1812
+ --adyen-sdk-text-title-l-font-family-secondary,
1813
+ inherit
1814
+ );
1815
+ --adyen-internal-tap-target: 44px;
1816
+ --adyen-internal-border-default-s: var(--adyen-internal-border-width-s) solid
1817
+ var(--adyen-internal-color-outline-primary);
1818
+ --adyen-internal-border-default-m: var(--adyen-internal-border-width-m) solid
1819
+ var(--adyen-internal-color-outline-primary);
1820
+ --adyen-internal-border-default-l: var(--adyen-internal-border-width-l) solid
1821
+ var(--adyen-internal-color-outline-primary);
1868
1822
  }
1869
1823
 
1870
- .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--minimal.adyen-kyc-dropdown-list--active {
1871
- width: 200px;
1824
+ .adyen-kyc-u-screen-reader-only {
1825
+ border: 0;
1826
+ clip: rect(0, 0, 0, 0);
1827
+ height: 1px;
1828
+ overflow: hidden;
1829
+ padding: 0 !important;
1830
+ position: absolute;
1831
+ white-space: nowrap;
1832
+ width: 1px;
1872
1833
  }
1873
1834
 
1874
- .adyen-kyc-dropdown-element {
1875
- border: var(--adyen-internal-border-width-s, 1px) solid transparent;
1876
- color: var(--adyen-internal-color-label-primary, #001222);
1877
- cursor: pointer;
1878
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
1879
- font-family: var(--adyen-internal-text-caption-font-family);
1880
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
1881
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
1882
- hyphens: auto;
1883
- outline: 0;
1884
- padding: var(--adyen-internal-spacer-040, 8px);
1885
- transition: background 0.2s ease-out, border-color 0.2s ease-out;
1886
- user-select: none;
1887
- word-break: break-word;
1888
- }
1889
- .adyen-kyc-dropdown-element.adyen-kyc-dropdown-search-element {
1890
- align-items: baseline;
1835
+ fieldset {
1836
+ border: none;
1837
+ padding: 0;
1838
+ margin: 0;
1839
+ }/* for container queries */
1840
+ .adyen-kyc-dropin {
1841
+ background: var(--adyen-internal-color-background-primary, #ffffff);
1891
1842
  display: flex;
1892
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1843
+ flex-direction: column;
1844
+ height: 100%;
1845
+ overflow: hidden;
1846
+ position: relative;
1847
+ width: 100%;
1848
+ }
1849
+ .adyen-kyc-dropin-container {
1850
+ position: relative;
1851
+ min-height: 480px;
1852
+ transform: scale(1);
1893
1853
  width: 100%;
1894
1854
  }
1895
1855
 
1896
- .adyen-kyc-dropdown-search-element__description {
1856
+ .adyen-kyc-dropin__content {
1857
+ display: flex;
1897
1858
  flex: 1;
1859
+ flex-direction: column;
1860
+ height: calc(100% - 56px);
1861
+ overflow: auto;
1898
1862
  }
1899
- .adyen-kyc-dropdown-search-element__description--highlight {
1900
- font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);
1901
- }
1902
- .adyen-kyc-dropdown-search-element__addresses {
1903
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1904
- display: flex;
1863
+ @container main (min-width: 680px) and (max-width: 1024px) {
1864
+ .adyen-kyc-dropin__content {
1865
+ height: calc(100% - 72px);
1866
+ }
1905
1867
  }
1906
- .adyen-kyc-dropdown-search-element__addresses--icon {
1907
- align-items: center;
1908
- color: var(--adyen-internal-color-label-secondary, #5c6874);
1868
+
1869
+ /* padding in dropins, not used in modal view */
1870
+ .adyen-kyc-dropin__content-main {
1909
1871
  display: flex;
1910
- margin-left: var(--adyen-internal-spacer-040, 8px);
1872
+ flex: 1;
1873
+ padding: var(--adyen-internal-spacer-070, 16px);
1874
+ width: 100%;
1875
+ box-sizing: border-box;
1911
1876
  }
1912
- .adyen-kyc-dropdown-search-element__addresses--text {
1913
- display: none;
1914
- margin-left: var(--adyen-internal-spacer-020, 4px);
1877
+ @container main (min-width: 680px) and (max-width: 1024px) {
1878
+ .adyen-kyc-dropin__content-main {
1879
+ padding: var(--adyen-internal-spacer-090, 24px);
1880
+ }
1915
1881
  }
1916
1882
  @container main (min-width: 1024px) {
1917
- .adyen-kyc-dropdown-search-element__addresses--text {
1918
- display: block;
1883
+ .adyen-kyc-dropin__content-main {
1884
+ padding: var(--adyen-internal-spacer-110, 40px);
1919
1885
  }
1920
1886
  }
1921
1887
 
1922
- .adyen-kyc-dropdown-element:last-child {
1923
- border-bottom: 0;
1924
- }
1925
-
1926
- .adyen-kyc-dropdown-element:hover,
1927
- .adyen-kyc-dropdown-element:focus,
1928
- .adyen-kyc-dropdown-element:active {
1929
- background: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
1930
- }
1931
-
1932
- .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element--active {
1933
- background: var(--adyen-internal-color-background-primary-active, #ecedef);
1934
- }
1935
-
1936
- .adyen-kyc-dropdown-element--disabled {
1937
- cursor: not-allowed;
1938
- opacity: 0.4;
1939
- }
1940
-
1941
- .adyen-kyc-dropdown-element__icon svg {
1942
- border-radius: var(--adyen-internal-border-radius-s, 4px);
1943
- margin-right: var(--adyen-internal-spacer-040, 8px);
1944
- height: 26px;
1945
- max-width: 40px;
1888
+ .adyen-kyc-dropin__main {
1889
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
1890
+ width: 100%;
1891
+ }.adyen-kyc-card {
1892
+ all: unset;
1893
+ display: block;
1894
+ width: 100%;
1895
+ box-sizing: border-box;
1896
+ border-radius: var(--adyen-internal-border-radius-l);
1897
+ transition: 200ms;
1898
+ border: 1px solid transparent;
1899
+ overflow: hidden;
1946
1900
  }
1947
1901
 
1948
- .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element-description {
1949
- align-items: baseline;
1950
- flex-direction: column;
1951
- font-size: var(--adyen-internal-text-body-font-size, 14px);
1902
+ .adyen-kyc-card-primary {
1903
+ background-color: var(--adyen-internal-color-background-primary);
1904
+ border-color: var(--adyen-internal-color-outline-primary);
1952
1905
  }
1953
1906
 
1954
- .adyen-kyc-dropdown + .adyen-kyc-input__inline-validation {
1955
- right: 32px;
1956
- }.adyen-kyc-dropdown {
1957
- position: relative;
1907
+ .adyen-kyc-card-secondary {
1908
+ background-color: var(--adyen-internal-color-background-secondary);
1958
1909
  }
1959
1910
 
1960
- .adyen-kyc-dropdown-list {
1961
- background: var(--adyen-internal-color-background-primary, #ffffff);
1962
- display: none;
1963
- list-style: none;
1964
- margin: var(--adyen-internal-spacer-000, 0px);
1965
- margin-bottom: var(--adyen-internal-spacer-120, 48px);
1966
- overflow-y: auto;
1967
- padding: var(--adyen-internal-spacer-000, 0px);
1968
- position: absolute;
1969
- width: 100%;
1970
- z-index: 2;
1971
- }
1972
- .adyen-kyc-dropdown-list__transformer {
1973
- position: relative;
1974
- padding: 0 !important;
1975
- margin: 0 !important;
1976
- }
1977
- .adyen-kyc-dropdown-list:focus {
1978
- outline: none;
1911
+ .adyen-kyc-card-padding-small {
1912
+ padding: var(--adyen-internal-spacer-040);
1979
1913
  }
1980
1914
 
1981
- .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
1982
- display: block;
1915
+ .adyen-kyc-card-padding-medium {
1916
+ padding: var(--adyen-internal-spacer-070);
1983
1917
  }
1984
1918
 
1985
- .adyen-kyc-dropdown-element {
1986
- align-items: center;
1987
- display: flex;
1919
+ .adyen-kyc-card-padding-large {
1920
+ padding: var(--adyen-internal-spacer-090);
1988
1921
  }
1989
1922
 
1990
- .adyen-kyc-dropdown-ignore-pointer-events {
1991
- pointer-events: none;
1923
+ .adyen-kyc-card-elevation-low {
1924
+ box-shadow: var(--adyen-internal-shadow-low);
1992
1925
  }
1993
1926
 
1994
- .adyen-kyc-dropdown-handle-pointer-events {
1995
- pointer-events: auto;
1996
- }.adyen-kyc-select-input-wrapper {
1997
- align-items: center;
1998
- display: flex;
1999
- background: var(--adyen-internal-color-background-primary, #ffffff);
2000
- border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary, #8c959d);
2001
- border-radius: var(--adyen-internal-border-radius-m, 8px);
2002
- color: var(--adyen-internal-color-label-primary, #001222);
2003
- font-size: var(--adyen-internal-text-body-font-size, 14px);
2004
- line-height: var(--adyen-internal-text-body-line-height, 20px);
2005
- min-height: 40px;
2006
- outline: 0;
2007
- 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);
2008
- text-decoration: none;
2009
- transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
2010
- user-select: none;
1927
+ .adyen-kyc-card-elevation-medium {
1928
+ box-shadow: var(--adyen-internal-shadow-low), var(--adyen-internal-shadow-medium);
2011
1929
  }
2012
1930
 
2013
- .adyen-kyc-select-input-wrapper:hover {
2014
- border-color: var(--adyen-internal-color-outline-tertiary-hover, #6c7782);
1931
+ .adyen-kyc-card-elevation-high {
1932
+ box-shadow: var(--adyen-internal-shadow-low), var(--adyen-internal-shadow-high);
2015
1933
  }
2016
1934
 
2017
- .adyen-kyc-select-input__icon svg {
2018
- border-radius: var(--adyen-internal-border-radius-s, 4px);
2019
- margin-right: var(--adyen-internal-spacer-040, 8px);
2020
- height: 26px;
2021
- max-width: 40px;
1935
+ .adyen-kyc-card-interactive {
1936
+ cursor: pointer;
1937
+ outline-offset: calc(1px + var(--adyen-internal-focus-ring-spacer));
1938
+ outline: var(--adyen-internal-focus-ring-outline) solid transparent;
2022
1939
  }
2023
1940
 
2024
- .adyen-kyc-select-input {
2025
- background-color: var(--adyen-internal-color-background-primary, #ffffff);
1941
+ .adyen-kyc-card-interactive:disabled {
1942
+ background-color: var(--adyen-internal-color-background-disabled);
1943
+ box-shadow: none;
1944
+ border-color: transparent;
1945
+ color: var(--adyen-internal-color-label-disabled);
1946
+ cursor: default;
2026
1947
  }
2027
1948
 
2028
- .adyen-kyc-select-input--active,
2029
- .adyen-kyc-select-input--active:hover,
2030
- .adyen-kyc-select-input-wrapper:active,
2031
- .adyen-kyc-select-input-wrapper:focus {
2032
- border-color: var(--adyen-internal-color-outline-tertiary-active, #001222);
2033
- outline: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary-active, #001222);
2034
- }
1949
+ @media (hover: hover) {
1950
+ .adyen-kyc-card-interactive.adyen-kyc-card-primary:hover:not(.adyen-kyc-card-interactive:disabled) {
1951
+ background-color: var(--adyen-internal-color-background-primary-hover);
1952
+ }
2035
1953
 
2036
- .adyen-kyc-select-input-wrapper.adyen-kyc-select-input--readonly {
2037
- background-color: var(--adyen-internal-color-background-disabled, #ecedef);
2038
- color: var(--adyen-internal-color-label-disabled, #8c959d);
2039
- cursor: not-allowed;
2040
- pointer-events: none;
2041
- border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-disabled, #dadddf);
1954
+ .adyen-kyc-card-interactive.adyen-kyc-card-secondary:hover:not(.adyen-kyc-card-interactive:disabled) {
1955
+ background-color: var(--adyen-internal-color-background-secondary-hover);
1956
+ }
2042
1957
  }
2043
1958
 
2044
- .adyen-kyc-select-input.adyen-kyc-select-input--readonly {
2045
- background-color: var(--adyen-internal-color-background-disabled, #ecedef);
2046
- color: var(--adyen-internal-color-label-disabled, #8c959d);
2047
- cursor: not-allowed;
2048
- pointer-events: none;
1959
+ .adyen-kyc-card-interactive:focus-visible {
1960
+ outline-color: var(--adyen-internal-focus-ring-color);
2049
1961
  }
2050
1962
 
2051
- .adyen-kyc-select-input--readonly::after {
2052
- 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");
1963
+ .adyen-kyc-card-interactive.adyen-kyc-card-primary:active:not(.adyen-kyc-card-interactive:disabled) {
1964
+ background-color: var(--adyen-internal-color-background-primary-active);
2053
1965
  }
2054
1966
 
2055
- .adyen-kyc-select-input--invalid {
2056
- border-color: var(--adyen-internal-color-outline-critical, #dc3801);
1967
+ .adyen-kyc-card-interactive.adyen-kyc-card-secondary:active:not(.adyen-kyc-card-interactive:disabled) {
1968
+ background-color: var(--adyen-internal-color-background-secondary-active);
2057
1969
  }
2058
1970
 
2059
- .adyen-kyc-select-input--minimal {
2060
- min-height: unset;
2061
- height: 100%;
2062
- background: var(--adyen-internal-color-background-secondary, #f4f5f6);
2063
- border: none;
2064
- border-radius: var(--adyen-internal-border-radius-s, 4px);
1971
+ .adyen-kyc-card-interactive.adyen-kyc-card-selected {
1972
+ pointer-events: none;
2065
1973
  }
2066
1974
 
2067
- .adyen-kyc-select-input-search {
2068
- align-items: center;
2069
- display: flex;
2070
- width: 100%;
1975
+ .adyen-kyc-card-selected {
1976
+ outline-offset: -1px;
1977
+ outline: 2px solid var(--adyen-internal-color-outline-primary-active);
2071
1978
  }
2072
- .adyen-kyc-select-input-search__icon {
2073
- color: var(--adyen-internal-color-label-tertiary, #8c959d);
2074
- font-size: var(--adyen-internal-text-caption-font-size, 12px);
2075
- font-family: var(--adyen-internal-text-caption-font-family);
2076
- font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2077
- line-height: var(--adyen-internal-text-caption-line-height, 18px);
2078
- padding-right: var(--adyen-internal-spacer-040, 8px);
1979
+ .adyen-kyc-checkbox__label {
1980
+ color: var(--adyen-internal-color-label-primary, #001222);
1981
+ cursor: pointer;
1982
+ display: inline-block;
1983
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
1984
+ font-weight: var(--adyen-internal-text-body-font-weight, 400);
1985
+ line-height: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
1986
+ padding-left: var(--adyen-internal-spacer-090, 24px);
1987
+ position: relative;
1988
+ user-select: none;
1989
+ width: calc(100% - 32px); /* leaves space for the error icon */
2079
1990
  }
2080
- .adyen-kyc-select-input-search .adyen-kyc-select-input--filterable::placeholder {
2081
- color: var(--adyen-internal-color-label-tertiary, #8c959d);
1991
+ .adyen-kyc-checkbox__helper-text {
1992
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
1993
+ display: block;
1994
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
1995
+ padding-left: var(--adyen-internal-spacer-090, 24px);
2082
1996
  }
2083
1997
 
2084
- .adyen-kyc-select-input-search::after {
2085
- display: none;
1998
+ .adyen-kyc-checkbox__input {
1999
+ opacity: 0;
2000
+ pointer-events: none;
2001
+ position: absolute;
2086
2002
  }
2087
-
2088
- .adyen-kyc-select-input-wrapper--filterable {
2089
- cursor: text;
2003
+ .adyen-kyc-checkbox__input:focus-visible + .adyen-kyc-checkbox__label::after {
2004
+ 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));
2005
+ transition: var(--adyen-internal-animation-duration-fast, 100ms) var(--adyen-internal-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
2006
+ transition-property: box-shadow;
2090
2007
  }
2091
-
2092
- .adyen-kyc-select-input-wrapper--non-filterable {
2093
- cursor: pointer;
2008
+ .adyen-kyc-checkbox__input:hover + .adyen-kyc-checkbox__label::after {
2009
+ background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2094
2010
  }
2095
-
2096
- .adyen-kyc-select-input-wrapper::after {
2097
- 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");
2098
- background-position: center;
2099
- background-repeat: no-repeat;
2011
+ .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::before {
2012
+ opacity: 1;
2013
+ }
2014
+ .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::after {
2015
+ background-color: var(--adyen-internal-color-background-inverse-primary, #001222);
2016
+ border-color: var(--adyen-internal-color-background-inverse-primary, #001222);
2017
+ }
2018
+ .adyen-kyc-checkbox__input:checked:hover + .adyen-kyc-checkbox__label::after {
2019
+ background-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
2020
+ border-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
2021
+ }
2022
+ .adyen-kyc-checkbox__input {
2023
+ /* Check */
2024
+ }
2025
+ .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::before {
2026
+ border-bottom: var(--adyen-internal-border-width-m, 2px) solid var(--adyen-internal-color-background-primary, #ffffff);
2027
+ border-right: var(--adyen-internal-border-width-m, 2px) solid var(--adyen-internal-color-background-primary, #ffffff);
2100
2028
  content: "";
2101
- height: 6px;
2029
+ height: 7px;
2030
+ left: 3px;
2031
+ opacity: 0;
2102
2032
  position: absolute;
2103
- right: 16px;
2104
- width: 8px;
2033
+ top: 4px;
2034
+ transform: rotateZ(37deg);
2035
+ transform-origin: 100% 100%;
2036
+ width: 5px;
2037
+ z-index: 1;
2038
+ }
2039
+ .adyen-kyc-checkbox__input {
2040
+ /* Box */
2041
+ }
2042
+ .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::after {
2043
+ background-color: var(--adyen-internal-color-background-primary, #ffffff);
2044
+ border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary, #8c959d);
2045
+ border-radius: var(--adyen-internal-border-radius-s, 4px);
2046
+ content: "";
2047
+ height: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
2048
+ left: 0;
2049
+ position: absolute;
2050
+ top: 0;
2051
+ width: calc(var(--adyen-internal-text-body-font-size, 14px) + 2px);
2052
+ z-index: 0;
2053
+ }.adyen-kyc-field {
2054
+ display: block;
2055
+ margin-bottom: var(--adyen-internal-spacer-090, 24px);
2056
+ width: 100%;
2057
+ }
2058
+ .adyen-kyc-field--disabled {
2059
+ color: var(--adyen-internal-color-label-disabled, #8c959d);
2060
+ opacity: 0.5;
2061
+ pointer-events: none;
2105
2062
  }
2106
2063
 
2107
- .adyen-kyc-select-input--list-open::after {
2108
- transform: rotate(180deg);
2064
+ .adyen-kyc-optional-label {
2065
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2109
2066
  }
2110
2067
 
2111
- .adyen-kyc-select-input--filterable {
2112
- border: 0;
2113
- caret-color: var(--adyen-internal-color-label-highlight, #0f75dc);
2068
+ .adyen-kyc-label__text {
2114
2069
  color: var(--adyen-internal-color-label-primary, #001222);
2115
- font-family: inherit;
2070
+ display: block;
2116
2071
  font-size: var(--adyen-internal-text-body-font-size, 14px);
2117
- height: 100%;
2118
- padding: var(--adyen-internal-spacer-000, 0px);
2119
- width: 100%;
2072
+ font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);
2073
+ transition: color 0.1s ease-out;
2120
2074
  }
2121
- .adyen-kyc-select-input--filterable::placeholder {
2075
+
2076
+ .adyen-kyc-helper-text {
2122
2077
  color: var(--adyen-internal-color-label-secondary, #5c6874);
2123
- font-weight: var(--adyen-internal-text-body-font-weight, 400);
2078
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2079
+ font-family: var(--adyen-internal-text-caption-font-family);
2080
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2081
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2082
+ display: flex;
2083
+ align-items: center;
2124
2084
  }
2125
- .adyen-kyc-select-input--filterable:focus, .adyen-kyc-select-input--filterable:active {
2126
- outline: 0;
2085
+ .adyen-kyc-helper-text__above {
2086
+ margin-bottom: var(--adyen-internal-spacer-020, 4px);
2127
2087
  }
2128
-
2129
- .adyen-kyc-select-input--non-filterable {
2130
- all: unset;
2088
+ .adyen-kyc-helper-text__below {
2089
+ margin-top: var(--adyen-internal-spacer-020, 4px);
2131
2090
  }
2132
-
2133
- .adyen-kyc-select-input--placeholder {
2134
- color: var(--adyen-internal-color-label-secondary, #5c6874);
2135
- font-weight: var(--adyen-internal-text-body-font-weight, 400);
2091
+ .adyen-kyc-helper-text__valid-format-check {
2092
+ color: var(--adyen-internal-color-label-success, #008845);
2093
+ font-size: var(--adyen-internal-text-title-font-size, 16px);
2094
+ font-family: var(--adyen-internal-text-title-font-family);
2095
+ font-weight: var(--adyen-internal-text-title-font-weight, 600);
2096
+ line-height: var(--adyen-internal-text-title-line-height, 26px);
2097
+ display: inline-flex;
2136
2098
  }
2137
2099
 
2138
- .adyen-kyc-ignore-pointer-events {
2139
- pointer-events: none;
2100
+ .adyen-kyc-label__text--error {
2101
+ color: var(--adyen-internal-color-label-critical, #dc3801);
2140
2102
  }
2141
2103
 
2142
- .adyen-kyc-handle-pointer-events {
2143
- pointer-events: auto;
2144
- }.adyen-kyc-end-state-layout {
2104
+ .adyen-kyc-error-text {
2145
2105
  align-items: center;
2106
+ color: var(--adyen-internal-color-label-critical, #dc3801);
2146
2107
  display: flex;
2147
- flex-direction: column;
2148
- flex-grow: 1;
2149
- gap: var(--adyen-internal-spacer-100);
2150
- height: 100%;
2151
- justify-content: center;
2152
- margin-left: auto;
2153
- margin-right: auto;
2154
- max-width: 600px;
2155
- width: 100%;
2108
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2109
+ font-family: var(--adyen-internal-text-caption-font-family);
2110
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2111
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2112
+ margin-top: var(--adyen-internal-spacer-020, 4px);
2113
+ position: relative;
2156
2114
  }
2157
2115
 
2158
- .adyen-kyc-end-state-layout-header {
2116
+ .adyen-kyc-guidance-text {
2159
2117
  align-items: center;
2118
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2119
+ display: flex;
2120
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2121
+ font-family: var(--adyen-internal-text-caption-font-family);
2122
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2123
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2124
+ margin-top: var(--adyen-internal-spacer-020, 4px);
2125
+ position: relative;
2126
+ }
2127
+
2128
+ .adyen-kyc-upload-field__guidance {
2160
2129
  display: flex;
2161
2130
  flex-direction: column;
2162
- gap: var(--adyen-internal-spacer-040);
2163
- text-align: center;
2131
+ }
2132
+ .adyen-kyc-upload-field__subtitle {
2133
+ color: var(--adyen-internal-color-label-primary, #001222);
2134
+ margin: var(--adyen-internal-spacer-070, 16px) var(--adyen-internal-spacer-000, 0px);
2164
2135
  }
2165
2136
 
2166
- .adyen-kyc-end-state-layout-icon {
2167
- align-items: center;
2168
- border-radius: 50%;
2137
+ .adyen-kyc-input-wrapper {
2138
+ display: block;
2139
+ position: relative;
2140
+ margin-top: var(--adyen-internal-spacer-040, 8px);
2141
+ }
2142
+ .adyen-kyc-input-wrapper--block {
2143
+ display: block;
2144
+ }.adyen-kyc-loader-wrapper-loader {
2145
+ display: none;
2146
+ height: 100%;
2147
+ left: 0;
2148
+ position: absolute;
2149
+ top: 0;
2150
+ width: 100%;
2151
+ z-index: 1;
2152
+ }
2153
+
2154
+ .adyen-kyc-loader-wrapper-loader-active {
2155
+ display: block;
2156
+ }
2157
+ /* for container queries */
2158
+ .adyen-kyc-modal {
2159
+ background-color: var(--adyen-internal-color-background-modal);
2160
+ border: var(--adyen-internal-spacer-000);
2161
+ box-shadow: var(--adyen-internal-shadow-high);
2169
2162
  display: flex;
2170
- height: 64px;
2171
- justify-content: center;
2172
- width: 64px;
2163
+ flex-direction: column;
2164
+ height: 100vh;
2165
+ height: 100dvh;
2166
+ max-height: unset;
2167
+ max-width: unset;
2168
+ overflow: hidden;
2169
+ padding: var(--adyen-internal-spacer-000);
2170
+ position: fixed;
2171
+ width: 100vw;
2172
+ width: 100dvw;
2173
2173
  }
2174
-
2175
- .adyen-kyc-end-state-layout-icon svg {
2176
- height: 24px;
2177
- width: 24px;
2174
+ .adyen-kyc-modal:focus-visible {
2175
+ outline: none;
2178
2176
  }
2179
-
2180
- .adyen-kyc-end-state-layout-icon-success {
2181
- background-color: var(--adyen-internal-color-decorative-green);
2182
- box-shadow: var(--adyen-internal-shadow-medium);
2183
- color: var(--adyen-internal-color-label-on-color);
2177
+ @media (min-width: 480px) {
2178
+ .adyen-kyc-modal {
2179
+ transition: max-height 400ms, max-width 400ms;
2180
+ }
2184
2181
  }
2185
2182
 
2186
- .adyen-kyc-end-state-layout-icon-error {
2187
- background-color: var(--adyen-internal-color-background-critical-strong);
2188
- box-shadow: var(--adyen-internal-shadow-medium);
2189
- color: var(--adyen-internal-color-label-on-color);
2183
+ .adyen-kyc-modal-small {
2184
+ border-radius: var(--adyen-internal-border-radius-l);
2185
+ max-height: 80vh;
2186
+ max-width: 400px;
2187
+ width: 80vw;
2188
+ height: fit-content;
2190
2189
  }
2191
2190
 
2192
- .adyen-kyc-end-state-layout-icon-info {
2193
- background-color: var(--adyen-internal-color-background-highlight-weak);
2194
- color: var(--adyen-internal-color-label-highlight);
2191
+ @media (min-width: 480px) {
2192
+ .adyen-kyc-modal-medium {
2193
+ border-radius: var(--adyen-internal-border-radius-l);
2194
+ height: 90vh;
2195
+ max-height: 600px;
2196
+ max-width: 600px;
2197
+ width: 90vw;
2198
+ }
2195
2199
  }
2196
2200
 
2197
- .adyen-kyc-end-state-layout-icon-warning {
2198
- background-color: var(--adyen-internal-color-decorative-yellow);
2199
- color: var(--adyen-internal-color-label-primary);
2201
+ @media (min-width: 480px) {
2202
+ .adyen-kyc-modal-large {
2203
+ border-radius: var(--adyen-internal-border-radius-l);
2204
+ height: 90vh;
2205
+ max-height: 900px;
2206
+ max-width: 900px;
2207
+ width: 90vw;
2208
+ }
2200
2209
  }
2201
2210
 
2202
- .adyen-kyc-end-state-layout-text {
2203
- align-items: center;
2211
+ .adyen-kyc-modal-body {
2204
2212
  display: flex;
2205
2213
  flex-direction: column;
2206
- gap: var(--adyen-internal-spacer-040);
2207
- text-align: center;
2214
+ overflow-y: auto;
2215
+ scrollbar-width: thin;
2208
2216
  }
2209
2217
 
2210
- .adyen-kyc-end-state-layout-title {
2211
- color: var(--adyen-internal-color-label-primary);
2212
- font-size: var(--adyen-internal-text-title-m-font-size);
2213
- font-weight: var(--adyen-internal-text-title-m-font-weight);
2214
- line-height: var(--adyen-internal-text-title-m-line-height);
2215
- margin: 0;
2218
+ .adyen-kyc-modal-body-height {
2219
+ height: 100%;
2216
2220
  }
2217
2221
 
2218
- .adyen-kyc-end-state-layout-description {
2219
- color: var(--adyen-internal-color-label-secondary);
2220
- font-size: var(--adyen-internal-text-body-font-size);
2221
- font-weight: var(--adyen-internal-text-body-font-weight);
2222
- line-height: var(--adyen-internal-text-body-line-height);
2222
+ .adyen-kyc-modal-accessable-title {
2223
+ display: none;
2223
2224
  }
2224
2225
 
2225
- .adyen-kyc-end-state-layout-action {
2226
- display: flex;
2227
- flex-direction: column;
2228
- gap: var(--adyen-internal-spacer-040);
2229
- max-width: 320px;
2230
- width: 100%;
2231
- }
2232
- .adyen-kyc-accordion,
2233
- .adyen-kyc-accordion-summary {
2234
- color: var(--adyen-internal-color-label-primary);
2235
- font-size: var(--adyen-internal-text-body-font-size);
2236
- font-family: var(--adyen-internal-text-body-font-family);
2237
- line-height: var(--adyen-internal-text-body-line-height);
2238
- cursor: pointer;
2226
+ .adyen-kyc-modal-transition-slide-in {
2227
+ animation-name: adyen-kyc-slide-in;
2228
+ animation-duration: 400ms;
2229
+ animation-timing-function: ease-out;
2239
2230
  }
2240
2231
 
2241
- .adyen-kyc-accordion {
2242
- background: none;
2243
- border-radius: var(--adyen-internal-border-radius-l);
2244
- margin-bottom: var(--adyen-internal-spacer-050);
2232
+ .adyen-kyc-modal-transition-drop-in {
2233
+ animation-name: adyen-kyc-drop-in;
2234
+ animation-duration: 250ms;
2235
+ animation-timing-function: ease;
2245
2236
  }
2246
2237
 
2247
- .adyen-kyc-accordion-basic {
2248
- background-color: var(--adyen-internal-color-background-secondary);
2238
+ .adyen-kyc-modal-inset {
2239
+ padding: var(--adyen-internal-spacer-140) var(--adyen-internal-spacer-070);
2249
2240
  }
2250
- .adyen-kyc-accordion-info {
2251
- background-color: var(--adyen-internal-color-background-highlight-weak);
2241
+ @media (min-width: 480px) {
2242
+ .adyen-kyc-modal-inset {
2243
+ padding-left: var(--adyen-internal-spacer-100);
2244
+ padding-right: var(--adyen-internal-spacer-100);
2245
+ }
2252
2246
  }
2253
- .adyen-kyc-accordion-error {
2254
- background-color: var(--adyen-internal-color-background-critical-weak);
2247
+ @media (min-width: 680px) {
2248
+ .adyen-kyc-modal-inset {
2249
+ padding-left: calc(var(--adyen-internal-spacer-070) * 2 + var(--adyen-internal-tap-target));
2250
+ padding-right: calc(var(--adyen-internal-spacer-070) * 2 + var(--adyen-internal-tap-target));
2251
+ }
2255
2252
  }
2256
- .adyen-kyc-accordion-warning {
2257
- background-color: var(--adyen-internal-color-background-warning-weak);
2253
+
2254
+ .adyen-kyc-modal::backdrop {
2255
+ animation-name: adyen-kyc-backdrop-dissolve;
2256
+ animation-duration: 400ms;
2257
+ animation-timing-function: ease;
2258
+ background-color: var(--adyen-internal-color-support-overlay);
2259
+ opacity: 0.5;
2260
+ backdrop-filter: blur(10px);
2258
2261
  }
2259
- .adyen-kyc-accordion-success {
2260
- background-color: var(--adyen-internal-color-background-success-weak);
2262
+
2263
+ .adyen-kyc-modal-button {
2264
+ position: absolute;
2265
+ top: var(--adyen-internal-spacer-070);
2266
+ right: var(--adyen-internal-spacer-070);
2267
+ z-index: 10;
2261
2268
  }
2262
- .adyen-kyc-accordion-narrow .adyen-kyc-accordion-summary {
2263
- padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-070);
2269
+
2270
+ @keyframes adyen-kyc-backdrop-dissolve {
2271
+ 0% {
2272
+ opacity: 0;
2273
+ }
2274
+ 100% {
2275
+ opacity: 0.5;
2276
+ backdrop-filter: blur(10px);
2277
+ }
2264
2278
  }
2265
- .adyen-kyc-accordion-narrow .adyen-kyc-accordion-content {
2266
- padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-070)
2267
- var(--adyen-internal-spacer-060);
2279
+ @keyframes adyen-kyc-slide-in {
2280
+ 0% {
2281
+ opacity: 0;
2282
+ top: 64px;
2283
+ }
2284
+ 100% {
2285
+ opacity: 1;
2286
+ top: 0;
2287
+ }
2268
2288
  }
2269
- .adyen-kyc-accordion-with-icon .adyen-kyc-accordion-content {
2270
- margin-left: var(--adyen-internal-spacer-080);
2289
+ @keyframes adyen-kyc-drop-in {
2290
+ 0% {
2291
+ opacity: 0;
2292
+ transform: scale(1.2);
2293
+ }
2294
+ 100% {
2295
+ opacity: 1;
2296
+ transform: scale(1);
2297
+ }
2271
2298
  }
2272
-
2273
- .adyen-kyc-accordion-summary {
2274
- display: flex;
2299
+ .adyen-kyc-modal-header {
2275
2300
  align-items: center;
2276
- gap: var(--adyen-internal-spacer-050);
2277
- padding: var(--adyen-internal-spacer-080);
2301
+ display: flex;
2302
+ font-size: var(--adyen-internal-text-title-font-size);
2278
2303
  font-weight: var(--adyen-internal-text-title-font-weight);
2279
- transition: margin 150ms ease-out;
2280
- margin-bottom: var(--adyen-internal-spacer-000);
2281
- border-radius: var(--adyen-internal-border-radius-l);
2282
- }
2283
-
2284
- .adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow {
2285
- cursor: pointer;
2286
- user-select: none;
2287
- height: 1em;
2288
- }
2289
-
2290
- .adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow-right {
2291
- margin-left: auto;
2292
- margin-right: var(--adyen-internal-spacer-050);
2304
+ gap: var(--adyen-internal-spacer-040);
2305
+ justify-content: space-between;
2306
+ padding: var(--adyen-internal-spacer-070);
2293
2307
  }
2294
2308
 
2295
- .adyen-kyc-accordion[open] .adyen-kyc-accordion-arrow {
2296
- transform: rotate(-180deg);
2297
- }
2298
- .adyen-kyc-accordion summary::-webkit-details-marker {
2299
- display: none;
2309
+ .adyen-kyc-modal-content {
2310
+ flex-grow: 1;
2311
+ overflow-y: auto;
2312
+ padding: var(--adyen-internal-spacer-070);
2300
2313
  }
2301
2314
 
2302
- .adyen-kyc-accordion-content {
2303
- cursor: auto;
2304
- padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-080)
2305
- var(--adyen-internal-spacer-080);
2306
- user-select: none;
2315
+ .adyen-kyc-modal-footer {
2316
+ align-items: center;
2317
+ border-top: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-primary);
2307
2318
  display: flex;
2308
- flex-direction: column;
2309
2319
  gap: var(--adyen-internal-spacer-040);
2320
+ justify-content: flex-end;
2321
+ padding: var(--adyen-internal-spacer-070);
2322
+ }.adyen-kyc-progress-bar {
2323
+ --adyen-progress-bar-size: 4px;
2324
+ background-color: var(--adyen-internal-color-background-secondary);
2325
+ height: var(--adyen-progress-bar-size);
2326
+ overflow: hidden;
2310
2327
  }
2311
2328
 
2312
- .adyen-kyc-accordion[open] summary {
2313
- margin-bottom: var(--adyen-internal-spacer-020);
2314
- user-select: auto;
2329
+ .adyen-kyc-progress-bar-rounded {
2330
+ border-radius: calc(var(--adyen-progress-bar-size) / 2);
2315
2331
  }
2316
- .adyen-kyc-alert {
2317
- border-radius: var(--adyen-internal-border-radius-m);
2318
- padding: var(--adyen-internal-spacer-070);
2319
- word-break: break-word;
2320
- display: flex;
2321
- flex-direction: column;
2322
- gap: var(--adyen-internal-spacer-040);
2323
- text-align: left;
2332
+
2333
+ .adyen-kyc-progress-bar-indicator {
2334
+ background-color: var(--adyen-internal-color-background-inverse-primary);
2335
+ text-indent: -1000%;
2336
+ transition: width 400ms;
2337
+ overflow: hidden;
2324
2338
  }
2325
- .adyen-kyc-alert-without-icon .adyen-kyc-alert-explanation,
2326
- .adyen-kyc-alert-without-icon .adyen-kyc-alert-actions {
2327
- margin: 0 var(--adyen-internal-spacer-070);
2339
+ /* for container queries */
2340
+ .adyen-kyc-dropdown {
2341
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2342
+ max-width: 100%;
2343
+ width: 100%;
2328
2344
  }
2329
2345
 
2330
- .adyen-kyc-alert-basic {
2331
- background-color: var(--adyen-internal-color-background-secondary);
2346
+ .adyen-kyc-dropdown--minimal {
2347
+ max-width: 120px;
2332
2348
  }
2333
2349
 
2334
- .adyen-kyc-alert-info {
2335
- background-color: var(--adyen-internal-color-background-highlight-weak);
2350
+ .adyen-kyc-dropdown-list {
2351
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
2352
+ 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));
2353
+ z-index: 2;
2354
+ }
2355
+ .adyen-kyc-dropdown-list .adyen-kyc-checkbox__helper-text {
2356
+ cursor: pointer;
2336
2357
  }
2337
2358
 
2338
- .adyen-kyc-alert-error {
2339
- background-color: var(--adyen-internal-color-background-critical-weak);
2359
+ .adyen-kyc-dropdown-list--above {
2360
+ bottom: -6px;
2340
2361
  }
2341
2362
 
2342
- .adyen-kyc-alert-warning {
2343
- background-color: var(--adyen-internal-color-background-warning-weak);
2363
+ .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
2364
+ margin-top: var(--adyen-internal-spacer-010, 2px);
2344
2365
  }
2345
2366
 
2346
- .adyen-kyc-alert-success {
2347
- background-color: var(--adyen-internal-color-background-success-weak);
2367
+ .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--minimal.adyen-kyc-dropdown-list--active {
2368
+ width: 200px;
2348
2369
  }
2349
2370
 
2350
- .adyen-kyc-alert-header {
2351
- align-items: flex-start;
2371
+ .adyen-kyc-dropdown-element {
2372
+ border: var(--adyen-internal-border-width-s, 1px) solid transparent;
2373
+ color: var(--adyen-internal-color-label-primary, #001222);
2374
+ cursor: pointer;
2375
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2376
+ font-family: var(--adyen-internal-text-caption-font-family);
2377
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2378
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2379
+ hyphens: auto;
2380
+ outline: 0;
2381
+ padding: var(--adyen-internal-spacer-040, 8px);
2382
+ transition: background 0.2s ease-out, border-color 0.2s ease-out;
2383
+ user-select: none;
2384
+ word-break: break-word;
2385
+ }
2386
+ .adyen-kyc-dropdown-element.adyen-kyc-dropdown-search-element {
2387
+ align-items: baseline;
2352
2388
  display: flex;
2389
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2390
+ width: 100%;
2353
2391
  }
2354
2392
 
2355
- .adyen-kyc-alert-header-without-children {
2393
+ .adyen-kyc-dropdown-search-element__description {
2394
+ flex: 1;
2395
+ }
2396
+ .adyen-kyc-dropdown-search-element__description--highlight {
2397
+ font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);
2398
+ }
2399
+ .adyen-kyc-dropdown-search-element__addresses {
2400
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2401
+ display: flex;
2402
+ }
2403
+ .adyen-kyc-dropdown-search-element__addresses--icon {
2356
2404
  align-items: center;
2405
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2406
+ display: flex;
2407
+ margin-left: var(--adyen-internal-spacer-040, 8px);
2357
2408
  }
2358
-
2359
- .adyen-kyc-alert-icon {
2360
- line-height: var(--adyen-internal-text-body-line-height);
2361
- margin-top: var(--adyen-internal-spacer-010);
2409
+ .adyen-kyc-dropdown-search-element__addresses--text {
2410
+ display: none;
2411
+ margin-left: var(--adyen-internal-spacer-020, 4px);
2362
2412
  }
2363
- .adyen-kyc-alert-icon-info {
2364
- color: var(--adyen-internal-color-background-highlight-strong);
2413
+ @container main (min-width: 1024px) {
2414
+ .adyen-kyc-dropdown-search-element__addresses--text {
2415
+ display: block;
2416
+ }
2365
2417
  }
2366
2418
 
2367
- .adyen-kyc-alert-icon-error {
2368
- color: var(--adyen-internal-color-background-critical-strong);
2419
+ .adyen-kyc-dropdown-element:last-child {
2420
+ border-bottom: 0;
2369
2421
  }
2370
2422
 
2371
- .adyen-kyc-alert-icon-warning {
2372
- color: var(--adyen-internal-color-background-warning-strong);
2423
+ .adyen-kyc-dropdown-element:hover,
2424
+ .adyen-kyc-dropdown-element:focus,
2425
+ .adyen-kyc-dropdown-element:active {
2426
+ background: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2373
2427
  }
2374
2428
 
2375
- .adyen-kyc-alert-icon-success {
2376
- color: var(--adyen-internal-color-background-success-strong);
2429
+ .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element--active {
2430
+ background: var(--adyen-internal-color-background-primary-active, #ecedef);
2377
2431
  }
2378
2432
 
2379
- .adyen-kyc-alert-title {
2380
- flex-grow: 1;
2381
- margin-left: var(--adyen-internal-spacer-070);
2433
+ .adyen-kyc-dropdown-element--disabled {
2434
+ cursor: not-allowed;
2435
+ opacity: 0.4;
2382
2436
  }
2383
2437
 
2384
- .adyen-kyc-alert-explanation {
2385
- color: var(--adyen-internal-color-label-primary);
2386
- font-size: var(--adyen-internal-text-body-font-size);
2387
- margin: 0 var(--adyen-internal-spacer-100);
2438
+ .adyen-kyc-dropdown-element__icon svg {
2439
+ border-radius: var(--adyen-internal-border-radius-s, 4px);
2440
+ margin-right: var(--adyen-internal-spacer-040, 8px);
2441
+ height: 26px;
2442
+ max-width: 40px;
2388
2443
  }
2389
2444
 
2390
- .adyen-kyc-alert-actions {
2391
- display: flex;
2392
- gap: var(--adyen-internal-spacer-070);
2393
- text-align: left;
2445
+ .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element-description {
2446
+ align-items: baseline;
2447
+ flex-direction: column;
2448
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2394
2449
  }
2395
- /* for container queries */
2396
- .adyen-kyc-form-navigation {
2397
- width: 100%;
2450
+
2451
+ .adyen-kyc-dropdown + .adyen-kyc-input__inline-validation {
2452
+ right: 32px;
2453
+ }.adyen-kyc-dropdown {
2454
+ position: relative;
2398
2455
  }
2399
- @container main (max-width: 680px) {
2400
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
2401
- display: none;
2402
- }
2403
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
2404
- font-size: 0;
2405
- }
2406
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
2407
- font-size: var(--adyen-internal-text-title-font-size, 16px);
2408
- font-family: var(--adyen-internal-text-title-font-family);
2409
- font-weight: var(--adyen-internal-text-title-font-weight, 600);
2410
- line-height: var(--adyen-internal-text-title-line-height, 26px);
2411
- padding-left: var(--adyen-internal-spacer-000, 0px);
2412
- }
2456
+
2457
+ .adyen-kyc-dropdown-list {
2458
+ background: var(--adyen-internal-color-background-primary, #ffffff);
2459
+ display: none;
2460
+ list-style: none;
2461
+ margin: var(--adyen-internal-spacer-000, 0px);
2462
+ margin-bottom: var(--adyen-internal-spacer-120, 48px);
2463
+ overflow-y: auto;
2464
+ padding: var(--adyen-internal-spacer-000, 0px);
2465
+ position: absolute;
2466
+ width: 100%;
2467
+ z-index: 2;
2413
2468
  }
2414
- @container main (min-width: 680px) and (max-width: 1024px) {
2415
- .adyen-kyc-form-navigation {
2416
- padding-right: var(--adyen-internal-spacer-100, 32px);
2417
- }
2418
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
2419
- display: none;
2420
- }
2469
+ .adyen-kyc-dropdown-list__transformer {
2470
+ position: relative;
2471
+ padding: 0 !important;
2472
+ margin: 0 !important;
2421
2473
  }
2422
- @container main (max-width: 680px) {
2423
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
2424
- display: none;
2425
- }
2474
+ .adyen-kyc-dropdown-list:focus {
2475
+ outline: none;
2426
2476
  }
2427
- .adyen-kyc-form-navigation .adyen-kyc-form-navigation__items {
2428
- margin: var(--adyen-internal-spacer-040, 8px) 0 0 0;
2429
- padding: var(--adyen-internal-spacer-000, 0px);
2477
+
2478
+ .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
2479
+ display: block;
2430
2480
  }
2431
2481
 
2432
- .adyen-kyc-form-navigation__home-button-item {
2433
- align-items: center;
2434
- display: flex;
2435
- justify-content: space-between;
2436
- list-style-type: none;
2437
- margin-bottom: var(--adyen-internal-spacer-070, 16px);
2438
- }.adyen-kyc-form-navigation__item {
2482
+ .adyen-kyc-dropdown-element {
2439
2483
  align-items: center;
2440
- border-left: var(--adyen-internal-border-default-m);
2441
- color: var(--adyen-internal-color-label-primary, #001222);
2442
- cursor: default;
2443
2484
  display: flex;
2444
- 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);
2445
2485
  }
2446
- .adyen-kyc-form-navigation__item button {
2486
+
2487
+ .adyen-kyc-dropdown-ignore-pointer-events {
2488
+ pointer-events: none;
2489
+ }
2490
+
2491
+ .adyen-kyc-dropdown-handle-pointer-events {
2492
+ pointer-events: auto;
2493
+ }.adyen-kyc-select-input-wrapper {
2494
+ align-items: center;
2447
2495
  display: flex;
2448
- background: none;
2449
- border: none;
2496
+ background: var(--adyen-internal-color-background-primary, #ffffff);
2497
+ border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary, #8c959d);
2498
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
2499
+ color: var(--adyen-internal-color-label-primary, #001222);
2450
2500
  font-size: var(--adyen-internal-text-body-font-size, 14px);
2451
2501
  line-height: var(--adyen-internal-text-body-line-height, 20px);
2452
- padding: var(--adyen-internal-spacer-000, 0px);
2453
- color: inherit;
2454
- text-align: left;
2455
- }
2456
- .adyen-kyc-form-navigation__item--active {
2457
- border-left: var(--adyen-internal-border-width-m, 2px) solid;
2458
- color: var(--adyen-internal-color-label-highlight, #0f75dc);
2502
+ min-height: 40px;
2503
+ outline: 0;
2504
+ 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);
2505
+ text-decoration: none;
2506
+ transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
2507
+ user-select: none;
2459
2508
  }
2460
- .adyen-kyc-form-navigation__item--isnav button {
2461
- cursor: pointer;
2509
+
2510
+ .adyen-kyc-select-input-wrapper:hover {
2511
+ border-color: var(--adyen-internal-color-outline-tertiary-hover, #6c7782);
2462
2512
  }
2463
2513
 
2464
- .adyen-kyc-form-navigation__item-icon {
2465
- display: flex;
2466
- margin-left: var(--adyen-internal-spacer-040, 8px);
2514
+ .adyen-kyc-select-input__icon svg {
2515
+ border-radius: var(--adyen-internal-border-radius-s, 4px);
2516
+ margin-right: var(--adyen-internal-spacer-040, 8px);
2517
+ height: 26px;
2518
+ max-width: 40px;
2467
2519
  }
2468
- .adyen-kyc-form-navigation__item-icon--success {
2469
- color: var(--adyen-internal-color-label-success, #008845);
2520
+
2521
+ .adyen-kyc-select-input {
2522
+ background-color: var(--adyen-internal-color-background-primary, #ffffff);
2470
2523
  }
2471
- .adyen-kyc-form-navigation__item-icon--error {
2472
- color: var(--adyen-internal-color-label-critical, #dc3801);
2473
- }.adyen-contract-viewer .adyen-document-viewer {
2474
- --adv-text-color: var(--adyen-internal-color-label-primary, #001222);
2475
- --adv-text-font-weight-regular: var(--adyen-internal-text-body-font-weight, 400);
2476
- --adv-text-font-weight-semi-bold: var(--adyen-internal-text-body-stronger-font-weight, 500);
2477
- --adv-text-line-height: var(--adyen-internal-text-body-line-height, 20px);
2478
- --adv-text-font-size-medium: var(--adyen-internal-text-body-font-size, 14px);
2479
- --adv-text-font-size-small: var(--adyen-internal-text-caption-font-size, 12px);
2480
- --adv-text-font-family: var(--adyen-internal-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2481
- --adv-heading-font-size: var(--adyen-internal-text-title-l-font-size, 24px);
2482
- --adv-heading-font-weight: var(--adyen-internal-text-title-l-font-weight, 600);
2483
- --adv-heading-line-height: var(--adyen-internal-text-title-l-line-height, 34px);
2484
- --adv-heading-2-font-size: var(--adyen-internal-text-title-m-font-size, 20px);
2485
- --adv-heading-2-font-weight: var(--adyen-internal-text-title-m-font-weight, 600);
2486
- --adv-heading-2-line-height: var(--adyen-internal-text-title-m-line-height, 30px);
2487
- --adv-color-white: var(--adyen-internal-color-background-primary, #ffffff);
2488
- --adv-color-grey-10: var(--adyen-internal-color-background-secondary, #f4f5f6);
2489
- --adv-color-grey-20: var(--adyen-internal-color-background-tertiary, #ecedef);
2490
- --adv-color-black: var(--adyen-internal-color-background-inverse-primary, #001222);
2491
- --adv-color-blue: var(--adyen-internal-color-decorative-blue, #006bd7);
2492
- --adv-accordion-header-color: var(--adyen-internal-color-label-primary, #001222);
2493
- --adv-accordion-header-font-weight: var(--adyen-internal-text-title-font-weight, 600);
2494
- --adv-accordion-header-hover-background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2495
- --adv-accordion-header-active-background-color: var(--adyen-internal-color-background-primary-active, #ecedef);
2496
- --adv-accordion-content-padding: 0;
2497
- --adv-background-color: var(--adyen-internal-color-background-primary, #ffffff);
2498
- --adv-section-background-color: var(--adyen-internal-color-background-primary, #ffffff);
2499
- --adv-table-row-changed-background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2500
- --adv-icon-color: var(--adyen-internal-color-label-primary, #001222);
2501
- --adv-link-color: var(--adyen-internal-color-link-primary, #0065c9);
2502
- --adv-link-active-color: var(--adyen-internal-color-link-primary, #0065c9);
2503
- --adv-link-visited-color: var(--adyen-internal-color-link-primary-visited, #540884);
2504
- }.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)}
2505
- .adyen-kyc-tos-signed-alert:last-of-type {
2506
- margin-top: var(--adyen-internal-spacer-070);
2524
+
2525
+ .adyen-kyc-select-input--active,
2526
+ .adyen-kyc-select-input--active:hover,
2527
+ .adyen-kyc-select-input-wrapper:active,
2528
+ .adyen-kyc-select-input-wrapper:focus {
2529
+ border-color: var(--adyen-internal-color-outline-tertiary-active, #001222);
2530
+ outline: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-tertiary-active, #001222);
2507
2531
  }
2508
2532
 
2509
- .adyen-kyc-tos-container {
2510
- height: 100%;
2533
+ .adyen-kyc-select-input-wrapper.adyen-kyc-select-input--readonly {
2534
+ background-color: var(--adyen-internal-color-background-disabled, #ecedef);
2535
+ color: var(--adyen-internal-color-label-disabled, #8c959d);
2536
+ cursor: not-allowed;
2537
+ pointer-events: none;
2538
+ border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-disabled, #dadddf);
2511
2539
  }
2512
2540
 
2513
- .adyen-kyc-tos-content {
2514
- display: flex;
2515
- padding: var(--adyen-internal-spacer-070);
2541
+ .adyen-kyc-select-input.adyen-kyc-select-input--readonly {
2542
+ background-color: var(--adyen-internal-color-background-disabled, #ecedef);
2543
+ color: var(--adyen-internal-color-label-disabled, #8c959d);
2544
+ cursor: not-allowed;
2545
+ pointer-events: none;
2516
2546
  }
2517
2547
 
2518
- .adyen-kyc-tos-actions {
2519
- display: flex;
2520
- justify-content: space-between;
2521
- align-items: center;
2522
- gap: var(--adyen-internal-spacer-040);
2523
- padding: var(--adyen-internal-spacer-070);
2548
+ .adyen-kyc-select-input--readonly::after {
2549
+ 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");
2550
+ }
2524
2551
 
2525
- &:has(> :only-child) {
2526
- justify-content: flex-end;
2527
- }
2552
+ .adyen-kyc-select-input--invalid {
2553
+ border-color: var(--adyen-internal-color-outline-critical, #dc3801);
2528
2554
  }
2529
- /* for container queries */
2530
- .adyen-kyc-stack-layout {
2555
+
2556
+ .adyen-kyc-select-input--minimal {
2557
+ min-height: unset;
2558
+ height: 100%;
2559
+ background: var(--adyen-internal-color-background-secondary, #f4f5f6);
2560
+ border: none;
2561
+ border-radius: var(--adyen-internal-border-radius-s, 4px);
2562
+ }
2563
+
2564
+ .adyen-kyc-select-input-search {
2565
+ align-items: center;
2531
2566
  display: flex;
2532
- flex-direction: column;
2567
+ width: 100%;
2568
+ }
2569
+ .adyen-kyc-select-input-search__icon {
2570
+ color: var(--adyen-internal-color-label-tertiary, #8c959d);
2571
+ font-size: var(--adyen-internal-text-caption-font-size, 12px);
2572
+ font-family: var(--adyen-internal-text-caption-font-family);
2573
+ font-weight: var(--adyen-internal-text-caption-font-weight, 400);
2574
+ line-height: var(--adyen-internal-text-caption-line-height, 18px);
2575
+ padding-right: var(--adyen-internal-spacer-040, 8px);
2576
+ }
2577
+ .adyen-kyc-select-input-search .adyen-kyc-select-input--filterable::placeholder {
2578
+ color: var(--adyen-internal-color-label-tertiary, #8c959d);
2533
2579
  }
2534
2580
 
2535
- .adyen-kyc-stack-layout-gap-xs {
2536
- gap: var(--adyen-internal-spacer-020);
2581
+ .adyen-kyc-select-input-search::after {
2582
+ display: none;
2537
2583
  }
2538
2584
 
2539
- .adyen-kyc-stack-layout-gap-s {
2540
- gap: var(--adyen-internal-spacer-040);
2585
+ .adyen-kyc-select-input-wrapper--filterable {
2586
+ cursor: text;
2541
2587
  }
2542
2588
 
2543
- .adyen-kyc-stack-layout-gap-m {
2544
- gap: var(--adyen-internal-spacer-070);
2589
+ .adyen-kyc-select-input-wrapper--non-filterable {
2590
+ cursor: pointer;
2545
2591
  }
2546
2592
 
2547
- .adyen-kyc-stack-layout-gap-l {
2548
- gap: var(--adyen-internal-spacer-100);
2593
+ .adyen-kyc-select-input-wrapper::after {
2594
+ 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");
2595
+ background-position: center;
2596
+ background-repeat: no-repeat;
2597
+ content: "";
2598
+ height: 6px;
2599
+ position: absolute;
2600
+ right: 16px;
2601
+ width: 8px;
2549
2602
  }
2550
2603
 
2551
- .adyen-kyc-stack-layout-gap-xl {
2552
- gap: var(--adyen-internal-spacer-140);
2604
+ .adyen-kyc-select-input--list-open::after {
2605
+ transform: rotate(180deg);
2553
2606
  }
2554
2607
 
2555
- .adyen-kyc-stack-layout-left {
2556
- align-items: flex-start;
2608
+ .adyen-kyc-select-input--filterable {
2609
+ border: 0;
2610
+ caret-color: var(--adyen-internal-color-label-highlight, #0f75dc);
2611
+ color: var(--adyen-internal-color-label-primary, #001222);
2612
+ font-family: inherit;
2613
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2614
+ height: 100%;
2615
+ padding: var(--adyen-internal-spacer-000, 0px);
2616
+ width: 100%;
2617
+ }
2618
+ .adyen-kyc-select-input--filterable::placeholder {
2619
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2620
+ font-weight: var(--adyen-internal-text-body-font-weight, 400);
2621
+ }
2622
+ .adyen-kyc-select-input--filterable:focus, .adyen-kyc-select-input--filterable:active {
2623
+ outline: 0;
2557
2624
  }
2558
2625
 
2559
- .adyen-kyc-stack-layout-center {
2560
- align-items: center;
2626
+ .adyen-kyc-select-input--non-filterable {
2627
+ all: unset;
2561
2628
  }
2562
2629
 
2563
- .adyen-kyc-stack-layout-right {
2564
- align-items: flex-end;
2630
+ .adyen-kyc-select-input--placeholder {
2631
+ color: var(--adyen-internal-color-label-secondary, #5c6874);
2632
+ font-weight: var(--adyen-internal-text-body-font-weight, 400);
2565
2633
  }
2566
2634
 
2567
- .adyen-kyc-stack-layout-item {
2635
+ .adyen-kyc-ignore-pointer-events {
2636
+ pointer-events: none;
2637
+ }
2638
+
2639
+ .adyen-kyc-handle-pointer-events {
2640
+ pointer-events: auto;
2641
+ }.adyen-kyc-end-state-layout {
2642
+ align-items: center;
2643
+ display: flex;
2644
+ flex-direction: column;
2568
2645
  flex-grow: 1;
2646
+ gap: var(--adyen-internal-spacer-100);
2647
+ height: 100%;
2648
+ justify-content: center;
2649
+ margin-left: auto;
2650
+ margin-right: auto;
2651
+ max-width: 600px;
2569
2652
  width: 100%;
2570
2653
  }
2571
2654
 
2572
- @container main (min-width: 480px) {
2573
- .adyen-kyc-stack-layout-horizontal {
2574
- align-items: flex-start;
2575
- flex-direction: row;
2576
- }
2577
- .adyen-kyc-stack-layout-left-horizontal {
2578
- justify-content: flex-start;
2579
- }
2580
- .adyen-kyc-stack-layout-center-horizontal {
2581
- justify-content: center;
2582
- }
2583
- .adyen-kyc-stack-layout-right-horizontal {
2584
- justify-content: flex-end;
2585
- }
2586
- }/* for container queries */
2587
- .adyen-kyc-status {
2655
+ .adyen-kyc-end-state-layout-header {
2588
2656
  align-items: center;
2589
- border-radius: var(--adyen-internal-border-radius-xl);
2590
- display: inline-flex;
2591
- padding: var(--adyen-internal-spacer-020);
2657
+ display: flex;
2658
+ flex-direction: column;
2659
+ gap: var(--adyen-internal-spacer-040);
2660
+ text-align: center;
2592
2661
  }
2593
2662
 
2594
- .adyen-kyc-status-icon {
2595
- height: 18px;
2596
- width: 18px;
2597
- padding: 1px;
2663
+ .adyen-kyc-end-state-layout-icon {
2664
+ align-items: center;
2665
+ border-radius: 50%;
2666
+ display: flex;
2667
+ height: 64px;
2668
+ justify-content: center;
2669
+ width: 64px;
2598
2670
  }
2599
2671
 
2600
- .adyen-kyc-status-icon svg {
2601
- height: 16px;
2602
- width: 16px;
2672
+ .adyen-kyc-end-state-layout-icon svg {
2673
+ height: 24px;
2674
+ width: 24px;
2603
2675
  }
2604
2676
 
2605
- .adyen-kyc-status-text {
2606
- font-size: var(--adyen-internal-text-caption-font-size);
2607
- font-weight: var(--adyen-internal-text-caption-stronger-font-weight);
2608
- line-height: var(--adyen-internal-text-caption-line-height);
2609
- padding-left: var(--adyen-internal-spacer-020);
2610
- padding-right: var(--adyen-internal-spacer-020);
2677
+ .adyen-kyc-end-state-layout-icon-success {
2678
+ background-color: var(--adyen-internal-color-decorative-green);
2679
+ box-shadow: var(--adyen-internal-shadow-medium);
2680
+ color: var(--adyen-internal-color-label-on-color);
2611
2681
  }
2612
2682
 
2613
- @container main (max-width: 480px) {
2614
- .adyen-kyc-status-text-responsive {
2615
- display: none;
2616
- }
2683
+ .adyen-kyc-end-state-layout-icon-error {
2684
+ background-color: var(--adyen-internal-color-background-critical-strong);
2685
+ box-shadow: var(--adyen-internal-shadow-medium);
2686
+ color: var(--adyen-internal-color-label-on-color);
2617
2687
  }
2618
2688
 
2619
- .adyen-kyc-status-neutral {
2620
- background-color: var(--adyen-internal-color-background-secondary);
2621
- color: var(--adyen-internal-color-label-disabled);
2622
- fill: var(--adyen-internal-color-label-disabled);
2689
+ .adyen-kyc-end-state-layout-icon-info {
2690
+ background-color: var(--adyen-internal-color-background-highlight-weak);
2691
+ color: var(--adyen-internal-color-label-highlight);
2623
2692
  }
2624
2693
 
2625
- .adyen-kyc-status-neutral .adyen-kyc-status-text {
2694
+ .adyen-kyc-end-state-layout-icon-warning {
2695
+ background-color: var(--adyen-internal-color-decorative-yellow);
2696
+ color: var(--adyen-internal-color-label-primary);
2697
+ }
2698
+
2699
+ .adyen-kyc-end-state-layout-text {
2700
+ align-items: center;
2701
+ display: flex;
2702
+ flex-direction: column;
2703
+ gap: var(--adyen-internal-spacer-040);
2704
+ text-align: center;
2705
+ }
2706
+
2707
+ .adyen-kyc-end-state-layout-title {
2708
+ color: var(--adyen-internal-color-label-primary);
2709
+ font-size: var(--adyen-internal-text-title-m-font-size);
2710
+ font-weight: var(--adyen-internal-text-title-m-font-weight);
2711
+ line-height: var(--adyen-internal-text-title-m-line-height);
2712
+ margin: 0;
2713
+ }
2714
+
2715
+ .adyen-kyc-end-state-layout-description {
2626
2716
  color: var(--adyen-internal-color-label-secondary);
2717
+ font-size: var(--adyen-internal-text-body-font-size);
2718
+ font-weight: var(--adyen-internal-text-body-font-weight);
2719
+ line-height: var(--adyen-internal-text-body-line-height);
2627
2720
  }
2628
2721
 
2629
- .adyen-kyc-status-error {
2630
- background-color: var(--adyen-internal-color-background-secondary);
2631
- color: var(--adyen-internal-color-label-critical);
2632
- fill: var(--adyen-internal-color-label-critical);
2722
+ .adyen-kyc-end-state-layout-action {
2723
+ display: flex;
2724
+ flex-direction: column;
2725
+ gap: var(--adyen-internal-spacer-040);
2726
+ max-width: 320px;
2727
+ width: 100%;
2728
+ }
2729
+ /* for container queries */
2730
+ .adyen-kyc-form-navigation {
2731
+ width: 100%;
2732
+ }
2733
+ @container main (max-width: 680px) {
2734
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
2735
+ display: none;
2736
+ }
2737
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
2738
+ font-size: 0;
2739
+ }
2740
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
2741
+ font-size: var(--adyen-internal-text-title-font-size, 16px);
2742
+ font-family: var(--adyen-internal-text-title-font-family);
2743
+ font-weight: var(--adyen-internal-text-title-font-weight, 600);
2744
+ line-height: var(--adyen-internal-text-title-line-height, 26px);
2745
+ padding-left: var(--adyen-internal-spacer-000, 0px);
2746
+ }
2747
+ }
2748
+ @container main (min-width: 680px) and (max-width: 1024px) {
2749
+ .adyen-kyc-form-navigation {
2750
+ padding-right: var(--adyen-internal-spacer-100, 32px);
2751
+ }
2752
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
2753
+ display: none;
2754
+ }
2633
2755
  }
2634
-
2635
- .adyen-kyc-status-warning {
2636
- background-color: var(--adyen-internal-color-background-warning-weak);
2637
- color: var(--adyen-internal-color-label-warning);
2638
- fill: var(--adyen-internal-color-label-warning);
2756
+ @container main (max-width: 680px) {
2757
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
2758
+ display: none;
2759
+ }
2639
2760
  }
2640
-
2641
- .adyen-kyc-status-success {
2642
- background-color: var(--adyen-internal-color-background-success-weak);
2761
+ .adyen-kyc-form-navigation .adyen-kyc-form-navigation__items {
2762
+ margin: var(--adyen-internal-spacer-040, 8px) 0 0 0;
2763
+ padding: var(--adyen-internal-spacer-000, 0px);
2643
2764
  }
2644
2765
 
2645
- .adyen-kyc-status-success .adyen-kyc-status-text {
2646
- color: var(--adyen-internal-color-label-primary);
2766
+ .adyen-kyc-form-navigation__home-button-item {
2767
+ align-items: center;
2768
+ display: flex;
2769
+ justify-content: space-between;
2770
+ list-style-type: none;
2771
+ margin-bottom: var(--adyen-internal-spacer-070, 16px);
2772
+ }.adyen-kyc-form-navigation__item {
2773
+ align-items: center;
2774
+ border-left: var(--adyen-internal-border-default-m);
2775
+ color: var(--adyen-internal-color-label-primary, #001222);
2776
+ cursor: default;
2777
+ display: flex;
2778
+ 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);
2647
2779
  }
2648
-
2649
- .adyen-kyc-status-success .adyen-kyc-status-icon {
2650
- color: var(--adyen-internal-color-label-success);
2651
- fill: var(--adyen-internal-color-label-success);
2652
- }.adyen-kyc-header {
2780
+ .adyen-kyc-form-navigation__item button {
2653
2781
  display: flex;
2654
- flex-direction: column;
2655
- gap: var(--adyen-internal-spacer-070);
2782
+ background: none;
2783
+ border: none;
2784
+ font-size: var(--adyen-internal-text-body-font-size, 14px);
2785
+ line-height: var(--adyen-internal-text-body-line-height, 20px);
2786
+ padding: var(--adyen-internal-spacer-000, 0px);
2787
+ color: inherit;
2788
+ text-align: left;
2656
2789
  }
2657
-
2658
- .adyen-kyc-header-margin {
2659
- margin-bottom: var(--adyen-internal-spacer-140);
2790
+ .adyen-kyc-form-navigation__item--active {
2791
+ border-left: var(--adyen-internal-border-width-m, 2px) solid;
2792
+ color: var(--adyen-internal-color-label-highlight, #0f75dc);
2660
2793
  }
2661
-
2662
- .adyen-kyc-header-margin-secondary {
2663
- margin-bottom: var(--adyen-internal-spacer-100);
2794
+ .adyen-kyc-form-navigation__item--isnav button {
2795
+ cursor: pointer;
2664
2796
  }
2665
2797
 
2666
- .adyen-kyc-header-left {
2667
- align-items: flex-start;
2668
- text-align: left;
2798
+ .adyen-kyc-form-navigation__item-icon {
2799
+ display: flex;
2800
+ margin-left: var(--adyen-internal-spacer-040, 8px);
2669
2801
  }
2670
-
2671
- .adyen-kyc-header-center {
2672
- align-items: center;
2673
- text-align: center;
2802
+ .adyen-kyc-form-navigation__item-icon--success {
2803
+ color: var(--adyen-internal-color-label-success, #008845);
2804
+ }
2805
+ .adyen-kyc-form-navigation__item-icon--error {
2806
+ color: var(--adyen-internal-color-label-critical, #dc3801);
2807
+ }.adyen-contract-viewer .adyen-document-viewer {
2808
+ --adv-text-color: var(--adyen-internal-color-label-primary, #001222);
2809
+ --adv-text-font-weight-regular: var(--adyen-internal-text-body-font-weight, 400);
2810
+ --adv-text-font-weight-semi-bold: var(--adyen-internal-text-body-stronger-font-weight, 500);
2811
+ --adv-text-line-height: var(--adyen-internal-text-body-line-height, 20px);
2812
+ --adv-text-font-size-medium: var(--adyen-internal-text-body-font-size, 14px);
2813
+ --adv-text-font-size-small: var(--adyen-internal-text-caption-font-size, 12px);
2814
+ --adv-text-font-family: var(--adyen-internal-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2815
+ --adv-heading-font-size: var(--adyen-internal-text-title-l-font-size, 24px);
2816
+ --adv-heading-font-weight: var(--adyen-internal-text-title-l-font-weight, 600);
2817
+ --adv-heading-line-height: var(--adyen-internal-text-title-l-line-height, 34px);
2818
+ --adv-heading-2-font-size: var(--adyen-internal-text-title-m-font-size, 20px);
2819
+ --adv-heading-2-font-weight: var(--adyen-internal-text-title-m-font-weight, 600);
2820
+ --adv-heading-2-line-height: var(--adyen-internal-text-title-m-line-height, 30px);
2821
+ --adv-color-white: var(--adyen-internal-color-background-primary, #ffffff);
2822
+ --adv-color-grey-10: var(--adyen-internal-color-background-secondary, #f4f5f6);
2823
+ --adv-color-grey-20: var(--adyen-internal-color-background-tertiary, #ecedef);
2824
+ --adv-color-black: var(--adyen-internal-color-background-inverse-primary, #001222);
2825
+ --adv-color-blue: var(--adyen-internal-color-decorative-blue, #006bd7);
2826
+ --adv-accordion-header-color: var(--adyen-internal-color-label-primary, #001222);
2827
+ --adv-accordion-header-font-weight: var(--adyen-internal-text-title-font-weight, 600);
2828
+ --adv-accordion-header-hover-background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2829
+ --adv-accordion-header-active-background-color: var(--adyen-internal-color-background-primary-active, #ecedef);
2830
+ --adv-accordion-content-padding: 0;
2831
+ --adv-background-color: var(--adyen-internal-color-background-primary, #ffffff);
2832
+ --adv-section-background-color: var(--adyen-internal-color-background-primary, #ffffff);
2833
+ --adv-table-row-changed-background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
2834
+ --adv-icon-color: var(--adyen-internal-color-label-primary, #001222);
2835
+ --adv-link-color: var(--adyen-internal-color-link-primary, #0065c9);
2836
+ --adv-link-active-color: var(--adyen-internal-color-link-primary, #0065c9);
2837
+ --adv-link-visited-color: var(--adyen-internal-color-link-primary-visited, #540884);
2838
+ }.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)}
2839
+ .adyen-kyc-tos-signed-alert:last-of-type {
2840
+ margin-top: var(--adyen-internal-spacer-070);
2674
2841
  }
2675
2842
 
2676
- .adyen-kyc-header-right {
2677
- align-items: flex-end;
2678
- text-align: right;
2843
+ .adyen-kyc-tos-container {
2844
+ height: 100%;
2679
2845
  }
2680
2846
 
2681
- .adyen-kyc-header-content {
2847
+ .adyen-kyc-tos-content {
2682
2848
  display: flex;
2683
2849
  flex-direction: column;
2684
- gap: var(--adyen-internal-spacer-040);
2685
- }
2686
-
2687
- .adyen-kyc-header-actions {
2688
- max-width: 300px;
2689
- }
2690
-
2691
- .adyen-kyc-header-title {
2692
- color: var(--adyen-internal-color-label-primary);
2693
- margin: 0;
2694
- }
2850
+ padding: var(--adyen-internal-spacer-070);
2695
2851
 
2696
- .adyen-kyc-header-title-primary {
2697
- font-size: var(--adyen-internal-text-title-l-font-size);
2698
- font-family: var(--adyen-internal-text-title-l-font-family);
2699
- font-weight: var(--adyen-internal-text-title-l-font-weight);
2700
- line-height: var(--adyen-internal-text-title-l-line-height);
2852
+ @container main (min-width:480px) {
2853
+ flex-direction: row;
2854
+ }
2701
2855
  }
2702
2856
 
2703
- .adyen-kyc-header-title-secondary {
2704
- font-size: var(--adyen-internal-text-title-font-size);
2705
- font-family: var(--adyen-internal-text-title-font-family);
2706
- font-weight: var(--adyen-internal-text-title-font-weight);
2707
- }
2857
+ .adyen-kyc-tos-signer-field {
2858
+ width: 100%;
2708
2859
 
2709
- .adyen-kyc-header-description {
2710
- font-size: var(--adyen-internal-text-body-font-size);
2711
- font-family: var(--adyen-internal-text-body-font-family);
2712
- font-weight: var(--adyen-internal-text-body-font-weight);
2713
- line-height: var(--adyen-internal-text-body-line-height);
2860
+ @container main (min-width: 680px) {
2861
+ width: 50%;
2862
+ }
2714
2863
  }
2715
2864
 
2716
- .adyen-kyc-header-description-primary {
2717
- color: var(--adyen-internal-color-label-primary);
2718
- }
2865
+ .adyen-kyc-tos-actions {
2866
+ display: flex;
2867
+ justify-content: space-between;
2868
+ align-items: center;
2869
+ gap: var(--adyen-internal-spacer-040);
2870
+ padding: var(--adyen-internal-spacer-070);
2719
2871
 
2720
- .adyen-kyc-header-description-secondary {
2721
- color: var(--adyen-internal-color-label-secondary);
2872
+ &:has(> :only-child) {
2873
+ justify-content: flex-end;
2874
+ }
2722
2875
  }
2723
2876
  .adyen-kyc-list {
2724
2877
  display: flex;
@@ -3338,7 +3491,12 @@ fieldset {
3338
3491
  color: var(--adyen-internal-color-label-secondary, #5c6874);
3339
3492
  font-size: var(--adyen-internal-text-body-font-size, 14px);
3340
3493
  font-weight: var(--adyen-internal-text-body-font-weight, 400);
3341
- }.adyen-kyc-mismatch {
3494
+ }.adyen-kyc-summary-header {
3495
+ display: flex;
3496
+ justify-content: space-between;
3497
+ align-items: center;
3498
+ }
3499
+ .adyen-kyc-mismatch {
3342
3500
  animation: adyen-kyc-mismatchShake 300ms;
3343
3501
  border-color: var(--adyen-internal-color-outline-critical, #dc3801) !important;
3344
3502
  }
@@ -3430,112 +3588,22 @@ fieldset {
3430
3588
  .adyen-kyc-document-guidance__description {
3431
3589
  display: flex;
3432
3590
  gap: var(--adyen-internal-spacer-040, 8px);
3433
- margin-top: var(--adyen-internal-spacer-010, 2px);
3434
- color: var(--adyen-internal-color-label-on-color, #ffffff);
3435
- }
3436
-
3437
- .adyen-kyc-document-guidance__description-text {
3438
- color: var(--adyen-internal-color-label-primary, #001222);
3439
- }
3440
-
3441
- .adyen-kyc-document-guidance__icon {
3442
- height: 16px;
3443
- width: 16px;
3444
- border-radius: 50%;
3445
- background-color: var(--adyen-internal-color-background-success-strong, #008845);
3446
- }
3447
- .adyen-kyc-document-guidance__icon--invalid {
3448
- background-color: var(--adyen-internal-color-background-critical-strong, #dc3801);
3449
- }.adyen-kyc-dropzone {
3450
- border: var(--adyen-internal-border-width-s, 1px) dashed var(--adyen-internal-color-outline-secondary, #c8ccd0);
3451
- border-radius: var(--adyen-internal-border-radius-m, 8px);
3452
- display: flex;
3453
- flex-direction: column;
3454
- padding: var(--adyen-internal-spacer-080, 20px) var(--adyen-internal-spacer-090, 24px);
3455
- min-height: 70px;
3456
- transition: all 0.2s ease-out;
3457
- margin-top: var(--adyen-internal-spacer-040, 8px);
3458
- }
3459
- .adyen-kyc-dropzone--dragged {
3460
- border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-secondary-active, #001222);
3461
- 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));
3462
- }
3463
- .adyen-kyc-dropzone--error {
3464
- border: var(--adyen-internal-border-width-s, 1px) dashed var(--adyen-internal-color-outline-critical, #dc3801);
3465
- }
3466
- .adyen-kyc-dropzone__icon {
3467
- display: flex;
3468
- align-items: center;
3469
- justify-content: center;
3470
- background-color: var(--adyen-internal-color-background-secondary, #f4f5f6);
3471
- border-radius: 50%;
3472
- height: 32px;
3473
- width: 32px;
3474
- margin: var(--adyen-internal-spacer-000, 0px) auto var(--adyen-internal-spacer-060, 12px);
3475
- }
3476
- .adyen-kyc-dropzone__labels h4 {
3477
- margin-bottom: var(--adyen-internal-spacer-020, 4px);
3478
- }
3479
- .adyen-kyc-dropzone__labels {
3480
- display: flex;
3481
- flex-direction: column;
3482
- margin-bottom: var(--adyen-internal-spacer-060, 12px);
3483
- text-align: center;
3484
- }
3485
- .adyen-kyc-dropzone__input {
3486
- display: none;
3487
- }
3488
- .adyen-kyc-dropzone__button {
3489
- text-align: center;
3490
- }
3491
- .adyen-kyc-dropzone__extras {
3492
- margin-top: var(--adyen-internal-spacer-040, 8px);
3493
- }.adyen-kyc-dropzone-file {
3494
- display: flex;
3495
- align-items: center;
3496
- justify-content: space-between;
3497
- background: var(--adyen-internal-color-background-secondary, #f4f5f6);
3498
- border-radius: var(--adyen-internal-border-radius-m, 8px);
3499
- margin-bottom: var(--adyen-internal-spacer-070, 16px);
3500
- padding: var(--adyen-internal-spacer-060, 12px) var(--adyen-internal-spacer-070, 16px);
3501
- width: 100%;
3502
- margin-top: var(--adyen-internal-spacer-040, 8px);
3503
- }
3504
- .adyen-kyc-dropzone-file--error {
3505
- background-color: var(--adyen-internal-color-background-critical-weak, #fff3ef);
3506
- }
3507
- .adyen-kyc-dropzone-file--error .adyen-kyc-dropzone-file__icon {
3508
- color: var(--adyen-internal-color-background-critical-strong, #dc3801);
3509
- }
3510
- .adyen-kyc-dropzone-file__icon {
3511
- align-items: center;
3512
- display: flex;
3513
- margin-right: var(--adyen-internal-spacer-040, 8px);
3514
- color: var(--adyen-internal-color-background-success-strong, #008845);
3515
- }
3516
- .adyen-kyc-dropzone-file__labels {
3517
- overflow: hidden;
3518
- display: flex;
3519
- align-items: center;
3520
- }
3521
- .adyen-kyc-dropzone-file__name {
3522
- overflow: hidden;
3523
- text-overflow: ellipsis;
3524
- white-space: nowrap;
3525
- max-width: 600px;
3591
+ margin-top: var(--adyen-internal-spacer-010, 2px);
3592
+ color: var(--adyen-internal-color-label-on-color, #ffffff);
3526
3593
  }
3527
- .adyen-kyc-dropzone-file__size {
3528
- margin-left: var(--adyen-internal-spacer-040, 8px);
3594
+
3595
+ .adyen-kyc-document-guidance__description-text {
3596
+ color: var(--adyen-internal-color-label-primary, #001222);
3529
3597
  }
3530
- .adyen-kyc-dropzone-file__error {
3531
- color: var(--adyen-internal-color-label-critical, #dc3801);
3532
- margin-top: var(--adyen-internal-spacer-020, 4px);
3598
+
3599
+ .adyen-kyc-document-guidance__icon {
3600
+ height: 16px;
3601
+ width: 16px;
3602
+ border-radius: 50%;
3603
+ background-color: var(--adyen-internal-color-background-success-strong, #008845);
3533
3604
  }
3534
- .adyen-kyc-dropzone-file__button {
3535
- border: 0;
3536
- padding: var(--adyen-internal-spacer-000, 0px);
3537
- }.adyen-kyc-description-field {
3538
- padding: var(--adyen-internal-spacer-080, 20px) 0;
3605
+ .adyen-kyc-document-guidance__icon--invalid {
3606
+ background-color: var(--adyen-internal-color-background-critical-strong, #dc3801);
3539
3607
  }.adyen-kyc-tile-container {
3540
3608
  width: 100%;
3541
3609
  }
@@ -3669,6 +3737,96 @@ fieldset {
3669
3737
 
3670
3738
  .adyen-kyc-options {
3671
3739
  margin-top: var(--adyen-internal-spacer-080, 20px);
3740
+ }.adyen-kyc-dropzone {
3741
+ border: var(--adyen-internal-border-width-s, 1px) dashed var(--adyen-internal-color-outline-secondary, #c8ccd0);
3742
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
3743
+ display: flex;
3744
+ flex-direction: column;
3745
+ padding: var(--adyen-internal-spacer-080, 20px) var(--adyen-internal-spacer-090, 24px);
3746
+ min-height: 70px;
3747
+ transition: all 0.2s ease-out;
3748
+ margin-top: var(--adyen-internal-spacer-040, 8px);
3749
+ }
3750
+ .adyen-kyc-dropzone--dragged {
3751
+ border: var(--adyen-internal-border-width-s, 1px) solid var(--adyen-internal-color-outline-secondary-active, #001222);
3752
+ 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));
3753
+ }
3754
+ .adyen-kyc-dropzone--error {
3755
+ border: var(--adyen-internal-border-width-s, 1px) dashed var(--adyen-internal-color-outline-critical, #dc3801);
3756
+ }
3757
+ .adyen-kyc-dropzone__icon {
3758
+ display: flex;
3759
+ align-items: center;
3760
+ justify-content: center;
3761
+ background-color: var(--adyen-internal-color-background-secondary, #f4f5f6);
3762
+ border-radius: 50%;
3763
+ height: 32px;
3764
+ width: 32px;
3765
+ margin: var(--adyen-internal-spacer-000, 0px) auto var(--adyen-internal-spacer-060, 12px);
3766
+ }
3767
+ .adyen-kyc-dropzone__labels h4 {
3768
+ margin-bottom: var(--adyen-internal-spacer-020, 4px);
3769
+ }
3770
+ .adyen-kyc-dropzone__labels {
3771
+ display: flex;
3772
+ flex-direction: column;
3773
+ margin-bottom: var(--adyen-internal-spacer-060, 12px);
3774
+ text-align: center;
3775
+ }
3776
+ .adyen-kyc-dropzone__input {
3777
+ display: none;
3778
+ }
3779
+ .adyen-kyc-dropzone__button {
3780
+ text-align: center;
3781
+ }
3782
+ .adyen-kyc-dropzone__extras {
3783
+ margin-top: var(--adyen-internal-spacer-040, 8px);
3784
+ }.adyen-kyc-dropzone-file {
3785
+ display: flex;
3786
+ align-items: center;
3787
+ justify-content: space-between;
3788
+ background: var(--adyen-internal-color-background-secondary, #f4f5f6);
3789
+ border-radius: var(--adyen-internal-border-radius-m, 8px);
3790
+ margin-bottom: var(--adyen-internal-spacer-070, 16px);
3791
+ padding: var(--adyen-internal-spacer-060, 12px) var(--adyen-internal-spacer-070, 16px);
3792
+ width: 100%;
3793
+ margin-top: var(--adyen-internal-spacer-040, 8px);
3794
+ }
3795
+ .adyen-kyc-dropzone-file--error {
3796
+ background-color: var(--adyen-internal-color-background-critical-weak, #fff3ef);
3797
+ }
3798
+ .adyen-kyc-dropzone-file--error .adyen-kyc-dropzone-file__icon {
3799
+ color: var(--adyen-internal-color-background-critical-strong, #dc3801);
3800
+ }
3801
+ .adyen-kyc-dropzone-file__icon {
3802
+ align-items: center;
3803
+ display: flex;
3804
+ margin-right: var(--adyen-internal-spacer-040, 8px);
3805
+ color: var(--adyen-internal-color-background-success-strong, #008845);
3806
+ }
3807
+ .adyen-kyc-dropzone-file__labels {
3808
+ overflow: hidden;
3809
+ display: flex;
3810
+ align-items: center;
3811
+ }
3812
+ .adyen-kyc-dropzone-file__name {
3813
+ overflow: hidden;
3814
+ text-overflow: ellipsis;
3815
+ white-space: nowrap;
3816
+ max-width: 600px;
3817
+ }
3818
+ .adyen-kyc-dropzone-file__size {
3819
+ margin-left: var(--adyen-internal-spacer-040, 8px);
3820
+ }
3821
+ .adyen-kyc-dropzone-file__error {
3822
+ color: var(--adyen-internal-color-label-critical, #dc3801);
3823
+ margin-top: var(--adyen-internal-spacer-020, 4px);
3824
+ }
3825
+ .adyen-kyc-dropzone-file__button {
3826
+ border: 0;
3827
+ padding: var(--adyen-internal-spacer-000, 0px);
3828
+ }.adyen-kyc-description-field {
3829
+ padding: var(--adyen-internal-spacer-080, 20px) 0;
3672
3830
  }.adyen-kyc-landing-layout-image {
3673
3831
  margin: 0 auto;
3674
3832
  }
@@ -3963,95 +4121,7 @@ fieldset {
3963
4121
  flex-flow: row-reverse;
3964
4122
  justify-content: space-between;
3965
4123
  }
3966
- }.adyen-kyc-card {
3967
- all: unset;
3968
- display: block;
3969
- width: 100%;
3970
- box-sizing: border-box;
3971
- border-radius: var(--adyen-internal-border-radius-l);
3972
- transition: 200ms;
3973
- border: 1px solid transparent;
3974
- overflow: hidden;
3975
- }
3976
-
3977
- .adyen-kyc-card-primary {
3978
- background-color: var(--adyen-internal-color-background-primary);
3979
- border-color: var(--adyen-internal-color-outline-primary);
3980
- }
3981
-
3982
- .adyen-kyc-card-secondary {
3983
- background-color: var(--adyen-internal-color-background-secondary);
3984
- }
3985
-
3986
- .adyen-kyc-card-padding-small {
3987
- padding: var(--adyen-internal-spacer-040);
3988
- }
3989
-
3990
- .adyen-kyc-card-padding-medium {
3991
- padding: var(--adyen-internal-spacer-070);
3992
- }
3993
-
3994
- .adyen-kyc-card-padding-large {
3995
- padding: var(--adyen-internal-spacer-090);
3996
- }
3997
-
3998
- .adyen-kyc-card-elevation-low {
3999
- box-shadow: var(--adyen-internal-shadow-low);
4000
- }
4001
-
4002
- .adyen-kyc-card-elevation-medium {
4003
- box-shadow: var(--adyen-internal-shadow-low), var(--adyen-internal-shadow-medium);
4004
- }
4005
-
4006
- .adyen-kyc-card-elevation-high {
4007
- box-shadow: var(--adyen-internal-shadow-low), var(--adyen-internal-shadow-high);
4008
- }
4009
-
4010
- .adyen-kyc-card-interactive {
4011
- cursor: pointer;
4012
- outline-offset: calc(1px + var(--adyen-internal-focus-ring-spacer));
4013
- outline: var(--adyen-internal-focus-ring-outline) solid transparent;
4014
- }
4015
-
4016
- .adyen-kyc-card-interactive:disabled {
4017
- background-color: var(--adyen-internal-color-background-disabled);
4018
- box-shadow: none;
4019
- border-color: transparent;
4020
- color: var(--adyen-internal-color-label-disabled);
4021
- cursor: default;
4022
- }
4023
-
4024
- @media (hover: hover) {
4025
- .adyen-kyc-card-interactive.adyen-kyc-card-primary:hover:not(.adyen-kyc-card-interactive:disabled) {
4026
- background-color: var(--adyen-internal-color-background-primary-hover);
4027
- }
4028
-
4029
- .adyen-kyc-card-interactive.adyen-kyc-card-secondary:hover:not(.adyen-kyc-card-interactive:disabled) {
4030
- background-color: var(--adyen-internal-color-background-secondary-hover);
4031
- }
4032
- }
4033
-
4034
- .adyen-kyc-card-interactive:focus-visible {
4035
- outline-color: var(--adyen-internal-focus-ring-color);
4036
- }
4037
-
4038
- .adyen-kyc-card-interactive.adyen-kyc-card-primary:active:not(.adyen-kyc-card-interactive:disabled) {
4039
- background-color: var(--adyen-internal-color-background-primary-active);
4040
- }
4041
-
4042
- .adyen-kyc-card-interactive.adyen-kyc-card-secondary:active:not(.adyen-kyc-card-interactive:disabled) {
4043
- background-color: var(--adyen-internal-color-background-secondary-active);
4044
- }
4045
-
4046
- .adyen-kyc-card-interactive.adyen-kyc-card-selected {
4047
- pointer-events: none;
4048
- }
4049
-
4050
- .adyen-kyc-card-selected {
4051
- outline-offset: -1px;
4052
- outline: 2px solid var(--adyen-internal-color-outline-primary-active);
4053
- }
4054
- /* for container queries */
4124
+ }/* for container queries */
4055
4125
  .adyen-kyc-radio-group-card {
4056
4126
  display: flex;
4057
4127
  flex-direction: column;
@@ -4919,58 +4989,9 @@ input.adyen-kyc-radio-group-card__radio--floating {
4919
4989
  font-size: var(--adyen-internal-text-body-font-size, 14px);
4920
4990
  line-height: var(--adyen-internal-text-body-line-height, 20px);
4921
4991
  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);
4922
- }/* for container queries */
4923
- .adyen-kyc-dropin {
4924
- background: var(--adyen-internal-color-background-primary, #ffffff);
4925
- display: flex;
4926
- flex-direction: column;
4927
- height: 100%;
4928
- overflow: hidden;
4929
- position: relative;
4930
- width: 100%;
4931
- }
4932
- .adyen-kyc-dropin-container {
4933
- position: relative;
4934
- min-height: 480px;
4935
- transform: scale(1);
4936
- width: 100%;
4937
- }
4938
-
4939
- .adyen-kyc-dropin__content {
4940
- display: flex;
4941
- flex: 1;
4942
- flex-direction: column;
4943
- height: calc(100% - 56px);
4944
- overflow: auto;
4945
- }
4946
- @container main (min-width: 680px) and (max-width: 1024px) {
4947
- .adyen-kyc-dropin__content {
4948
- height: calc(100% - 72px);
4949
- }
4950
- }
4951
-
4952
- /* padding in dropins, not used in modal view */
4953
- .adyen-kyc-dropin__content-main {
4954
- display: flex;
4955
- flex: 1;
4956
- padding: var(--adyen-internal-spacer-070, 16px);
4957
- width: 100%;
4958
- box-sizing: border-box;
4959
- }
4960
- @container main (min-width: 680px) and (max-width: 1024px) {
4961
- .adyen-kyc-dropin__content-main {
4962
- padding: var(--adyen-internal-spacer-090, 24px);
4963
- }
4964
- }
4965
- @container main (min-width: 1024px) {
4966
- .adyen-kyc-dropin__content-main {
4967
- padding: var(--adyen-internal-spacer-110, 40px);
4968
- }
4969
- }
4970
-
4971
- .adyen-kyc-dropin__main {
4972
- border-radius: var(--adyen-internal-border-radius-m, 8px);
4973
- width: 100%;
4992
+ }.adyen-kyc-invited-decision-makers-container {
4993
+ max-width: 500px;
4994
+ margin: var(--adyen-internal-spacer-000, 0px) auto;
4974
4995
  }.adyen-kyc-tabs {
4975
4996
  display: flex;
4976
4997
  gap: 8px;