Merge branch 'main' into jonas-jonas/fallbackFont

packages/elements-react-stories/.storybook/global.css

@@ -2,5 +2,6 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 
 html {
-  --font-sans: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  --font-sans: "InterVariable", "Helvetica Neue", "Helvetica", "Arial",
+    sans-serif;
 }

packages/elements-react-stories/.storybook/preview-head.html

@@ -1,5 +1,15 @@
 <!-- Copyright © 2024 Ory Corp -->
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
-<link rel="preconnect" href="https://rsms.me/" />
-<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+<link
+  rel="preload"
+  href="/InterVariable.woff2?v=4.1"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+<link rel="stylesheet" href="/inter.css" />
+
+<script>
+  window.oryPasskeyLoginAutocompleteInit = function () {}
+</script>

packages/elements-react-stories/public/inter.css

@@ -0,0 +1,8 @@
+
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/InterVariable.woff2?v=4.1') format('woff2');
+}

packages/elements-react/src/theme/default/components/form/social.tsx

@@ -59,7 +59,12 @@ export function DefaultButtonSocial({
   const oidcNodeCount =
     ui.nodes.filter((node) => node.group === "oidc").length ?? 0
 
-  const Logo = logos[attributes.value]
+  // Ideally, kratos would return the provider name in the context
+  // At the moment it only returns the label (misleadingly named `provider`).
+  // But changing that would be a breaking change.
+  // So we have to extract the provider name from the id, which sometimes might contain a - followed by a unique ID.
+  // TODO(kratos): Add provider to the context
+  const Logo = logos[(attributes.value as string).split("-")[0]]
 
   const showLabel =
     _showLabel ?? (oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0)