@thunderid/react 1.4.1 → 1.6.0

package/dist/cjs/components/auth/SignIn/BaseSignIn.styles.cjs

@@ -0,0 +1,159 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/auth/SignIn/BaseSignIn.styles.ts
+/**
+* Creates styles for the BaseSignIn component
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
+	const signIn = require_emotion.css`
+      min-width: 420px;
+      margin: 0 auto;
+      font-family: ${theme.vars.typography.fontFamily};
+    `;
+	const card = require_emotion.css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      min-width: 420px;
+    `;
+	const logoContainer = require_emotion.css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const header = require_emotion.css`
+      gap: 0;
+      align-items: center;
+    `;
+	const title = require_emotion.css`
+      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+	const subtitle = require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
+      color: ${theme.vars.colors.text.secondary};
+    `;
+	const messagesContainer = require_emotion.css`
+      margin-top: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const messageItem = require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
+    `;
+	const errorContainer = require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const contentContainer = require_emotion.css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const loadingContainer = require_emotion.css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: calc(${theme.vars.spacing.unit} * 4);
+    `;
+	const centeredSpinnerContainer = require_emotion.css`
+      display: flex;
+      justify-content: center;
+      padding: 2rem;
+    `;
+	const loadingText = require_emotion.css`
+      margin-top: calc(${theme.vars.spacing.unit} * 2);
+      color: ${theme.vars.colors.text.secondary};
+    `;
+	const divider = require_emotion.css`
+      margin: calc(${theme.vars.spacing.unit} * 1) 0;
+    `;
+	const centeredContainer = require_emotion.css`
+      text-align: center;
+      padding: calc(${theme.vars.spacing.unit} * 4);
+    `;
+	const passkeyContainer = require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const passkeyText = require_emotion.css`
+      margin-top: calc(${theme.vars.spacing.unit} * 1);
+      color: ${theme.vars.colors.text.secondary};
+    `;
+	const form = require_emotion.css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const formDivider = require_emotion.css`
+      margin: calc(${theme.vars.spacing.unit} * 1) 0;
+    `;
+	const authenticatorSection = require_emotion.css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 1);
+    `;
+	const authenticatorItem = require_emotion.css`
+      width: 100%;
+    `;
+	const noAuthenticatorCard = require_emotion.css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const errorAlert = require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const messagesAlert = require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
+    `;
+	const flowMessagesContainer = require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	return {
+		authenticatorItem,
+		authenticatorSection,
+		card,
+		centeredContainer,
+		centeredSpinnerContainer,
+		contentContainer,
+		divider,
+		errorAlert,
+		errorContainer,
+		flowMessageItem: require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
+    `,
+		flowMessagesContainer,
+		form,
+		formDivider,
+		header,
+		loadingContainer,
+		loadingText,
+		logoContainer,
+		messageItem,
+		messagesAlert,
+		messagesContainer,
+		noAuthenticatorCard,
+		passkeyContainer,
+		passkeyText,
+		signIn,
+		subtitle,
+		title
+	};
+}, [
+	theme.vars.colors.background.surface,
+	theme.vars.colors.text.primary,
+	theme.vars.colors.text.secondary,
+	theme.vars.borderRadius.large,
+	theme.vars.spacing.unit,
+	theme.vars.typography.fontFamily,
+	colorScheme
+]);
+var BaseSignIn_styles_default = useStyles;
+
+//#endregion
+exports.default = BaseSignIn_styles_default;
+//# sourceMappingURL=BaseSignIn.styles.cjs.map

package/dist/cjs/components/auth/SignIn/BaseSignIn.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSignIn.styles.cjs","names":["signIn: string","card: string","logoContainer: string","header: string","title: string","subtitle: string","messagesContainer: string","messageItem: string","errorContainer: string","contentContainer: string","loadingContainer: string","centeredSpinnerContainer: string","loadingText: string","divider: string","centeredContainer: string","passkeyContainer: string","passkeyText: string","form: string","formDivider: string","authenticatorSection: string","authenticatorItem: string","noAuthenticatorCard: string","errorAlert: string","messagesAlert: string","flowMessagesContainer: string"],"sources":["../../../../../src/components/auth/SignIn/BaseSignIn.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseSignIn component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const signIn: string = css`\n      min-width: 420px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      min-width: 420px;\n    `;\n\n    const logoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const header: string = css`\n      gap: 0;\n      align-items: center;\n    `;\n\n    const title: string = css`\n      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const messagesContainer: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const messageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const errorContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const contentContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadingContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const centeredSpinnerContainer: string = css`\n      display: flex;\n      justify-content: center;\n      padding: 2rem;\n    `;\n\n    const loadingText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const divider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const centeredContainer: string = css`\n      text-align: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const passkeyContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const passkeyText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const form: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const formDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const authenticatorSection: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const authenticatorItem: string = css`\n      width: 100%;\n    `;\n\n    const noAuthenticatorCard: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const messagesAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const flowMessagesContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const flowMessageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    return {\n      authenticatorItem,\n      authenticatorSection,\n      card,\n      centeredContainer,\n      centeredSpinnerContainer,\n      contentContainer,\n      divider,\n      errorAlert,\n      errorContainer,\n      flowMessageItem,\n      flowMessagesContainer,\n      form,\n      formDivider,\n      header,\n      loadingContainer,\n      loadingText,\n      logoContainer,\n      messageItem,\n      messagesAlert,\n      messagesContainer,\n      noAuthenticatorCard,\n      passkeyContainer,\n      passkeyText,\n      signIn,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,SAAiB,mBAAG;;;qBAGT,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,mBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;kBACnC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwB,mBAAG;;;;4BAIT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,SAAiB,mBAAG;;;;CAK1B,MAAMC,QAAgB,mBAAG;yBACJ,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,WAAmB,mBAAG;4BACJ,MAAM,KAAK,QAAQ,KAAK;eACrC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,oBAA4B,mBAAG;yBAChB,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,cAAsB,mBAAG;4BACP,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,iBAAyB,mBAAG;4BACV,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,mBAA2B,mBAAG;;;kBAGtB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,mBAA2B,mBAAG;;;;sBAIlB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,2BAAmC,mBAAG;;;;;CAM5C,MAAMC,cAAsB,mBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,UAAkB,mBAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,oBAA4B,mBAAG;;sBAEnB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,mBAA2B,mBAAG;4BACZ,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,cAAsB,mBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,OAAe,mBAAG;;;kBAGV,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,cAAsB,mBAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,uBAA+B,mBAAG;;;kBAG1B,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,oBAA4B,mBAAG;;;CAIrC,MAAMC,sBAA8B,mBAAG;oBACvB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,aAAqB,mBAAG;4BACN,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,gBAAwB,mBAAG;4BACT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,wBAAgC,mBAAG;4BACjB,MAAM,KAAK,QAAQ,KAAK;;AAOhD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAd8B,mBAAG;4BACX,MAAM,KAAK,QAAQ,KAAK;;EAc9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,gCAAe"}