@thunderid/react 1.10.0 → 1.11.0

package/dist/cjs/components/primitives/Typography/Typography.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.styles.cjs","names":["variantStyles: Record<string, string | number>","colorValue: string","typography: string","typographyNoWrap: string","typographyInline: string","typographyGutterBottom: string","typographyH1: string","typographyH2: string","typographyH3: string","typographyH4: string","typographyH5: string","typographyH6: string","typographySubtitle1: string","typographySubtitle2: string","typographyBody1: string","typographyBody2: string","typographyCaption: string","typographyOverline: string"],"sources":["../../../../../src/components/primitives/Typography/Typography.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\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'subtitle1'\n  | 'subtitle2'\n  | 'body1'\n  | 'body2'\n  | 'caption'\n  | 'overline'\n  | 'button';\n\nexport type TypographyAlign = 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'textPrimary'\n  | 'textSecondary'\n  | 'inherit';\n\n/**\n * Creates styles for the Typography component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The typography variant\n * @param align - Text alignment\n * @param color - Color variant\n * @param noWrap - Whether text should be truncated with ellipsis\n * @param inline - Whether text should be displayed inline\n * @param gutterBottom - Whether to add bottom margin\n * @param fontWeight - Custom font weight\n * @param fontSize - Custom font size\n * @param lineHeight - Custom line height\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: TypographyVariant,\n  align: TypographyAlign,\n  color: TypographyColor,\n  noWrap: boolean,\n  inline: boolean,\n  gutterBottom: boolean,\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number,\n  fontSize?: string | number,\n  lineHeight?: string | number,\n): Record<string, string> =>\n  useMemo(() => {\n    const getColorValue = (colorVariant: TypographyColor): string => {\n      switch (colorVariant) {\n        case 'primary':\n          return theme.colors.primary.main;\n        case 'secondary':\n          return theme.colors.secondary.main;\n        case 'error':\n          return theme.colors.error.main;\n        case 'textPrimary':\n          return theme.colors.text.primary;\n        case 'textSecondary':\n          return theme.colors.text.secondary;\n        case 'inherit':\n          return 'inherit';\n        default:\n          return theme.colors.text.primary;\n      }\n    };\n\n    const getVariantStyles = (variantName: TypographyVariant): Record<string, string | number> => {\n      switch (variantName) {\n        case 'h1':\n          return {\n            fontSize: theme.vars.typography.fontSizes['3xl'],\n            fontWeight: 600,\n            letterSpacing: '-0.00735em',\n            lineHeight: 1.235,\n          };\n        case 'h2':\n          return {\n            fontSize: theme.vars.typography.fontSizes['2xl'],\n            fontWeight: 600,\n            letterSpacing: '0em',\n            lineHeight: 1.334,\n          };\n        case 'h3':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xl,\n            fontWeight: 600,\n            letterSpacing: '0.0075em',\n            lineHeight: 1.6,\n          };\n        case 'h4':\n          return {\n            fontSize: theme.vars.typography.fontSizes.lg,\n            fontWeight: 600,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.5,\n          };\n        case 'h5':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 600,\n            letterSpacing: '0em',\n            lineHeight: 1.334,\n          };\n        case 'h6':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.0075em',\n            lineHeight: 1.6,\n          };\n        case 'subtitle1':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 400,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.75,\n          };\n        case 'subtitle2':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.00714em',\n            lineHeight: 1.57,\n          };\n        case 'body1':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 400,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.5,\n          };\n        case 'body2':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 400,\n            letterSpacing: '0.01071em',\n            lineHeight: 1.43,\n          };\n        case 'caption':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xs,\n            fontWeight: 400,\n            letterSpacing: '0.03333em',\n            lineHeight: 1.66,\n          };\n        case 'overline':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xs,\n            fontWeight: 400,\n            letterSpacing: '0.08333em',\n            lineHeight: 2.66,\n            textTransform: 'uppercase' as const,\n          };\n        case 'button':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.02857em',\n            lineHeight: 1.75,\n            textTransform: 'uppercase' as const,\n          };\n        default:\n          return {};\n      }\n    };\n\n    const variantStyles: Record<string, string | number> = getVariantStyles(variant);\n    const colorValue: string = getColorValue(color);\n\n    const typography: string = css`\n      margin: 0;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${colorValue};\n      text-align: ${align};\n      display: ${inline ? 'inline' : 'block'};\n      ${variantStyles['fontSize'] ? `font-size: ${variantStyles['fontSize']};` : ''}\n      ${variantStyles['fontWeight'] ? `font-weight: ${variantStyles['fontWeight']};` : ''}\n      ${variantStyles['lineHeight'] ? `line-height: ${variantStyles['lineHeight']};` : ''}\n      ${variantStyles['letterSpacing'] ? `letter-spacing: ${variantStyles['letterSpacing']};` : ''}\n      ${variantStyles['textTransform'] ? `text-transform: ${variantStyles['textTransform']};` : ''}\n\n      /* Custom overrides */\n      ${fontWeight ? `font-weight: ${fontWeight} !important;` : ''}\n      ${fontSize ? `font-size: ${typeof fontSize === 'number' ? `${fontSize}px` : fontSize} !important;` : ''}\n      ${lineHeight ? `line-height: ${lineHeight} !important;` : ''}\n\n      /* Conditional styles */\n      ${noWrap\n        ? `\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      `\n        : ''}\n\n      ${gutterBottom\n        ? `\n        margin-bottom: ${theme.spacing.unit}px;\n      `\n        : ''}\n    `;\n\n    const typographyNoWrap: string = css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const typographyInline: string = css`\n      display: inline;\n    `;\n\n    const typographyGutterBottom: string = css`\n      margin-bottom: ${theme.spacing.unit}px;\n    `;\n\n    const typographyH1: string = css`\n      font-size: ${theme.vars.typography.fontSizes['3xl']};\n      font-weight: 600;\n      line-height: 1.235;\n      letter-spacing: -0.00735em;\n    `;\n\n    const typographyH2: string = css`\n      font-size: ${theme.vars.typography.fontSizes['2xl']};\n      font-weight: 600;\n      line-height: 1.334;\n      letter-spacing: 0em;\n    `;\n\n    const typographyH3: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-weight: 600;\n      line-height: 1.6;\n      letter-spacing: 0.0075em;\n    `;\n\n    const typographyH4: string = css`\n      font-size: ${theme.vars.typography.fontSizes.lg};\n      font-weight: 600;\n      line-height: 1.5;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographyH5: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 600;\n      line-height: 1.334;\n      letter-spacing: 0em;\n    `;\n\n    const typographyH6: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.6;\n      letter-spacing: 0.0075em;\n    `;\n\n    const typographySubtitle1: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 400;\n      line-height: 1.75;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographySubtitle2: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.57;\n      letter-spacing: 0.00714em;\n    `;\n\n    const typographyBody1: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 400;\n      line-height: 1.5;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographyBody2: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 400;\n      line-height: 1.43;\n      letter-spacing: 0.01071em;\n    `;\n\n    const typographyCaption: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xs};\n      font-weight: 400;\n      line-height: 1.66;\n      letter-spacing: 0.03333em;\n    `;\n\n    const typographyOverline: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xs};\n      font-weight: 400;\n      line-height: 2.66;\n      letter-spacing: 0.08333em;\n      text-transform: uppercase;\n    `;\n\n    const typographyButton: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.75;\n      letter-spacing: 0.02857em;\n      text-transform: uppercase;\n    `;\n\n    return {\n      typography,\n      typographyBody1,\n      typographyBody2,\n      typographyButton,\n      typographyCaption,\n      typographyGutterBottom,\n      typographyH1,\n      typographyH2,\n      typographyH3,\n      typographyH4,\n      typographyH5,\n      typographyH6,\n      typographyInline,\n      typographyNoWrap,\n      typographyOverline,\n      typographySubtitle1,\n      typographySubtitle2,\n    };\n  }, [theme, colorScheme, variant, align, color, noWrap, inline, gutterBottom, fontWeight, fontSize, lineHeight]);\n\nexport default useStyles;\n"],"mappings":"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"}
+{"version":3,"file":"Typography.styles.cjs","names":["variantStyles: Record<string, string | number>","colorValue: string","typography: string","typographyNoWrap: string","typographyInline: string","typographyGutterBottom: string","typographyH1: string","typographyH2: string","typographyH3: string","typographyH4: string","typographyH5: string","typographyH6: string","typographySubtitle1: string","typographySubtitle2: string","typographyBody1: string","typographyBody2: string","typographyCaption: string","typographyOverline: string"],"sources":["../../../../../src/components/primitives/Typography/Typography.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\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'subtitle1'\n  | 'subtitle2'\n  | 'body1'\n  | 'body2'\n  | 'caption'\n  | 'overline'\n  | 'button';\n\nexport type TypographyAlign = 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'textPrimary'\n  | 'textSecondary'\n  | 'inherit';\n\n/**\n * Creates styles for the Typography component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The typography variant\n * @param align - Text alignment\n * @param color - Color variant\n * @param noWrap - Whether text should be truncated with ellipsis\n * @param inline - Whether text should be displayed inline\n * @param gutterBottom - Whether to add bottom margin\n * @param fontWeight - Custom font weight\n * @param fontSize - Custom font size\n * @param lineHeight - Custom line height\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: TypographyVariant,\n  align: TypographyAlign,\n  color: TypographyColor,\n  noWrap: boolean,\n  inline: boolean,\n  gutterBottom: boolean,\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number,\n  fontSize?: string | number,\n  lineHeight?: string | number,\n): Record<string, string> =>\n  useMemo(() => {\n    const getColorValue = (colorVariant: TypographyColor): string => {\n      switch (colorVariant) {\n        case 'primary':\n          return theme.colors.primary.main;\n        case 'secondary':\n          return theme.colors.secondary.main;\n        case 'error':\n          return theme.colors.error.main;\n        case 'success':\n          return theme.colors.success.main;\n        case 'warning':\n          return theme.colors.warning.main;\n        case 'info':\n          return theme.colors.info.main;\n        case 'textPrimary':\n          return theme.colors.text.primary;\n        case 'textSecondary':\n          return theme.colors.text.secondary;\n        case 'inherit':\n          return 'inherit';\n        default:\n          return theme.colors.text.primary;\n      }\n    };\n\n    const getVariantStyles = (variantName: TypographyVariant): Record<string, string | number> => {\n      switch (variantName) {\n        case 'h1':\n          return {\n            fontSize: theme.vars.typography.fontSizes['3xl'],\n            fontWeight: 600,\n            letterSpacing: '-0.00735em',\n            lineHeight: 1.235,\n          };\n        case 'h2':\n          return {\n            fontSize: theme.vars.typography.fontSizes['2xl'],\n            fontWeight: 600,\n            letterSpacing: '0em',\n            lineHeight: 1.334,\n          };\n        case 'h3':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xl,\n            fontWeight: 600,\n            letterSpacing: '0.0075em',\n            lineHeight: 1.6,\n          };\n        case 'h4':\n          return {\n            fontSize: theme.vars.typography.fontSizes.lg,\n            fontWeight: 600,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.5,\n          };\n        case 'h5':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 600,\n            letterSpacing: '0em',\n            lineHeight: 1.334,\n          };\n        case 'h6':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.0075em',\n            lineHeight: 1.6,\n          };\n        case 'subtitle1':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 400,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.75,\n          };\n        case 'subtitle2':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.00714em',\n            lineHeight: 1.57,\n          };\n        case 'body1':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 400,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.5,\n          };\n        case 'body2':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 400,\n            letterSpacing: '0.01071em',\n            lineHeight: 1.43,\n          };\n        case 'caption':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xs,\n            fontWeight: 400,\n            letterSpacing: '0.03333em',\n            lineHeight: 1.66,\n          };\n        case 'overline':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xs,\n            fontWeight: 400,\n            letterSpacing: '0.08333em',\n            lineHeight: 2.66,\n            textTransform: 'uppercase' as const,\n          };\n        case 'button':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.02857em',\n            lineHeight: 1.75,\n            textTransform: 'uppercase' as const,\n          };\n        default:\n          return {};\n      }\n    };\n\n    const variantStyles: Record<string, string | number> = getVariantStyles(variant);\n    const colorValue: string = getColorValue(color);\n\n    const typography: string = css`\n      margin: 0;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${colorValue};\n      text-align: ${align};\n      display: ${inline ? 'inline' : 'block'};\n      ${variantStyles['fontSize'] ? `font-size: ${variantStyles['fontSize']};` : ''}\n      ${variantStyles['fontWeight'] ? `font-weight: ${variantStyles['fontWeight']};` : ''}\n      ${variantStyles['lineHeight'] ? `line-height: ${variantStyles['lineHeight']};` : ''}\n      ${variantStyles['letterSpacing'] ? `letter-spacing: ${variantStyles['letterSpacing']};` : ''}\n      ${variantStyles['textTransform'] ? `text-transform: ${variantStyles['textTransform']};` : ''}\n\n      /* Custom overrides */\n      ${fontWeight ? `font-weight: ${fontWeight} !important;` : ''}\n      ${fontSize ? `font-size: ${typeof fontSize === 'number' ? `${fontSize}px` : fontSize} !important;` : ''}\n      ${lineHeight ? `line-height: ${lineHeight} !important;` : ''}\n\n      /* Conditional styles */\n      ${noWrap\n        ? `\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      `\n        : ''}\n\n      ${gutterBottom\n        ? `\n        margin-bottom: ${theme.spacing.unit}px;\n      `\n        : ''}\n    `;\n\n    const typographyNoWrap: string = css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const typographyInline: string = css`\n      display: inline;\n    `;\n\n    const typographyGutterBottom: string = css`\n      margin-bottom: ${theme.spacing.unit}px;\n    `;\n\n    const typographyH1: string = css`\n      font-size: ${theme.vars.typography.fontSizes['3xl']};\n      font-weight: 600;\n      line-height: 1.235;\n      letter-spacing: -0.00735em;\n    `;\n\n    const typographyH2: string = css`\n      font-size: ${theme.vars.typography.fontSizes['2xl']};\n      font-weight: 600;\n      line-height: 1.334;\n      letter-spacing: 0em;\n    `;\n\n    const typographyH3: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-weight: 600;\n      line-height: 1.6;\n      letter-spacing: 0.0075em;\n    `;\n\n    const typographyH4: string = css`\n      font-size: ${theme.vars.typography.fontSizes.lg};\n      font-weight: 600;\n      line-height: 1.5;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographyH5: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 600;\n      line-height: 1.334;\n      letter-spacing: 0em;\n    `;\n\n    const typographyH6: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.6;\n      letter-spacing: 0.0075em;\n    `;\n\n    const typographySubtitle1: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 400;\n      line-height: 1.75;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographySubtitle2: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.57;\n      letter-spacing: 0.00714em;\n    `;\n\n    const typographyBody1: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 400;\n      line-height: 1.5;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographyBody2: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 400;\n      line-height: 1.43;\n      letter-spacing: 0.01071em;\n    `;\n\n    const typographyCaption: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xs};\n      font-weight: 400;\n      line-height: 1.66;\n      letter-spacing: 0.03333em;\n    `;\n\n    const typographyOverline: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xs};\n      font-weight: 400;\n      line-height: 2.66;\n      letter-spacing: 0.08333em;\n      text-transform: uppercase;\n    `;\n\n    const typographyButton: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.75;\n      letter-spacing: 0.02857em;\n      text-transform: uppercase;\n    `;\n\n    return {\n      typography,\n      typographyBody1,\n      typographyBody2,\n      typographyButton,\n      typographyCaption,\n      typographyGutterBottom,\n      typographyH1,\n      typographyH2,\n      typographyH3,\n      typographyH4,\n      typographyH5,\n      typographyH6,\n      typographyInline,\n      typographyNoWrap,\n      typographyOverline,\n      typographySubtitle1,\n      typographySubtitle2,\n    };\n  }, [theme, colorScheme, variant, align, color, noWrap, inline, gutterBottom, fontWeight, fontSize, lineHeight]);\n\nexport default useStyles;\n"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -38,13 +38,13 @@ const require_SignUpButton = require('./components/auth/buttons/SignUpButton/Sig
 const require_SignedIn = require('./components/auth/guards/SignedIn.cjs');
 const require_SignedOut = require('./components/auth/guards/SignedOut.cjs');
 const require_Loading = require('./components/auth/guards/Loading.cjs');
+const require_Typography = require('./components/primitives/Typography/Typography.cjs');
+const require_Card = require('./components/primitives/Card/Card.cjs');
 const require_CircleAlert = require('./components/primitives/Icons/CircleAlert.cjs');
 const require_CircleCheck = require('./components/primitives/Icons/CircleCheck.cjs');
 const require_Info = require('./components/primitives/Icons/Info.cjs');
 const require_TriangleAlert = require('./components/primitives/Icons/TriangleAlert.cjs');
-const require_Typography = require('./components/primitives/Typography/Typography.cjs');
 const require_Alert = require('./components/primitives/Alert/Alert.cjs');
-const require_Card = require('./components/primitives/Card/Card.cjs');
 const require_FormControl = require('./components/primitives/FormControl/FormControl.cjs');
 const require_InputLabel = require('./components/primitives/InputLabel/InputLabel.cjs');
 const require_Toggle = require('./components/primitives/Toggle/Toggle.cjs');
@@ -82,6 +82,8 @@ const require_LinkedInButton = require('./components/auth/buttons/LinkedInButton
 const require_MicrosoftButton = require('./components/auth/buttons/MicrosoftButton.cjs');
 const require_SignInWithEthereumButton = require('./components/auth/buttons/SignInWithEthereumButton.cjs');
 const require_BaseSignIn = require('./components/auth/SignIn/BaseSignIn.cjs');
+const require_BaseDeviceGrant = require('./components/auth/DeviceGrant/BaseDeviceGrant.cjs');
+const require_DeviceGrant = require('./components/auth/DeviceGrant/DeviceGrant.cjs');
 const require_useOAuthCallback = require('./hooks/auth/useOAuthCallback.cjs');
 const require_SignIn = require('./components/auth/SignIn/SignIn.cjs');
 const require_Logo = require('./components/primitives/Logo/Logo.cjs');
@@ -250,6 +252,7 @@ exports.BaseApplicationDetails = require_BaseApplicationDetails.default;
 exports.BaseApplicationList = require_BaseApplicationList.default;
 exports.BaseAuthFlowSelect = require_BaseAuthFlowSelect.default;
 exports.BaseChangeCredential = require_BaseChangeCredential.default;
+exports.BaseDeviceGrant = require_BaseDeviceGrant.default;
 exports.BaseGroupCreate = require_BaseGroupCreate.default;
 exports.BaseGroupList = require_BaseGroupList.default;
 exports.BaseGroupMembers = require_BaseGroupMembers.default;
@@ -301,6 +304,7 @@ exports.ConsentCheckboxList = require_ConsentCheckboxList.default;
 exports.ConsentDetailField = require_ConsentDetailField.default;
 exports.DataTable = require_DataTable.default;
 exports.DatePicker = require_DatePicker.default;
+exports.DeviceGrant = require_DeviceGrant.default;
 exports.Divider = require_Divider.default;
 Object.defineProperty(exports, 'EMOJI_URI_SCHEME', {
   enumerable: true,

package/dist/components/account/UserProfile/BaseUserProfile.js

@@ -3,8 +3,8 @@ import useTheme_default from "../../../contexts/Theme/useTheme.js";
 import useTranslation_default from "../../../hooks/useTranslation.js";
 import Button_default from "../../primitives/Button/Button.js";
 import Typography_default from "../../primitives/Typography/Typography.js";
-import Alert_default from "../../primitives/Alert/Alert.js";
 import Card_default from "../../primitives/Card/Card.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
 import TextField_default from "../../primitives/TextField/TextField.js";
 import Checkbox_default from "../../primitives/Checkbox/Checkbox.js";
 import DatePicker_default from "../../primitives/DatePicker/DatePicker.js";

package/dist/components/admin/GroupMembers/GroupMembers.d.ts

@@ -14,6 +14,10 @@ export type GroupMembersProps = Omit<BaseGroupMembersProps, 'candidates' | 'erro
      */
     editable?: boolean;
     groupId: string;
+    /**
+     * Organization unit the users and agents offered for adding are listed from.
+     */
+    ouId?: string;
 };
 /**
  * Lists the users and agents in a group, and lets the signed-in user add and remove them.

package/dist/components/admin/GroupMembers/GroupMembers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupMembers.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/GroupMembers/GroupMembers.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,kBAAkB,EAqBnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAAwB,MAAM,OAAO,CAAC;AAChD,OAAyB,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAsB3E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,qBAAqB,EACrB,YAAY,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CACvF,GAAG;IACF;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwEvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"GroupMembers.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/GroupMembers/GroupMembers.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,kBAAkB,EAsBnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAAwB,MAAM,OAAO,CAAC;AAChD,OAAyB,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AA8B3E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,qBAAqB,EACrB,YAAY,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CACvF,GAAG;IACF;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAgFvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/admin/GroupMembers/GroupMembers.js

@@ -3,7 +3,7 @@ import useManagementEndpoint_default from "../../../hooks/management/useManageme
 import useResourceQuery_default from "../../../hooks/management/useResourceQuery.js";
 import useResourceMutation_default from "../../../hooks/management/useResourceMutation.js";
 import BaseGroupMembers_default from "./BaseGroupMembers.js";
-import { AgentQueryKeys, GroupQueryKeys, RoleQueryKeys, UserQueryKeys, addGroupMembers, getAgentName, getAgents, getGroupMembers, getUsers, removeGroupMembers, resolveManagedIdentityName, toManagementErrorMessage } from "@thunderid/browser";
+import { AgentQueryKeys, GroupQueryKeys, RoleQueryKeys, UserQueryKeys, addGroupMembers, getAgentName, getAgents, getGroupMembers, getUsers, removeGroupMembers, resolveManagedIdentityName, toEqualityFilter, toManagementErrorMessage } from "@thunderid/browser";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -25,11 +25,12 @@ const getMembershipInvalidatedKeys = ({ groupId }) => [
 * <GroupMembers groupId={groupId} />
 * ```
 */
-const GroupMembers = ({ administrationMode, editable = false, groupId, preferences,...rest }) => {
+const GroupMembers = ({ administrationMode, editable = false, groupId, ouId, preferences,...rest }) => {
 	const { t } = useTranslation_default(preferences?.i18n);
 	const groupsEndpoint = useManagementEndpoint_default("groups");
 	const usersEndpoint = useManagementEndpoint_default("users");
 	const agentsEndpoint = useManagementEndpoint_default("agents");
+	const filter = toEqualityFilter("ouId", ouId);
 	const members = useResourceQuery_default([
 		GroupQueryKeys.GROUP_MEMBERS,
 		groupId,
@@ -40,15 +41,29 @@ const GroupMembers = ({ administrationMode, editable = false, groupId, preferenc
 		groupId,
 		limit: 100
 	}), { enabled: Boolean(groupId) });
-	const users = useResourceQuery_default([UserQueryKeys.USERS, { limit: 100 }], (fetcher) => getUsers({
-		...usersEndpoint,
-		fetcher,
+	const users = useResourceQuery_default([UserQueryKeys.USERS, {
+		filter,
 		limit: 100
+	}], async (fetcher) => ({
+		filter,
+		page: await getUsers({
+			...usersEndpoint,
+			fetcher,
+			filter,
+			limit: 100
+		})
 	}), { enabled: editable });
-	const agents = useResourceQuery_default([AgentQueryKeys.AGENTS, { limit: 100 }], (fetcher) => getAgents({
-		...agentsEndpoint,
-		fetcher,
+	const agents = useResourceQuery_default([AgentQueryKeys.AGENTS, {
+		filter,
 		limit: 100
+	}], async (fetcher) => ({
+		filter,
+		page: await getAgents({
+			...agentsEndpoint,
+			fetcher,
+			filter,
+			limit: 100
+		})
 	}), { enabled: editable });
 	const add = useResourceMutation_default(({ groupId: id, members: changes }, fetcher) => addGroupMembers({
 		...groupsEndpoint,
@@ -63,16 +78,23 @@ const GroupMembers = ({ administrationMode, editable = false, groupId, preferenc
 		groupId: id,
 		members: changes
 	}), getMembershipInvalidatedKeys);
-	const candidates = useMemo(() => ({
-		agent: (agents.data?.agents ?? []).map((agent) => ({
-			id: agent.id,
-			label: getAgentName(agent)
-		})),
-		user: (users.data?.users ?? []).map((user) => ({
-			id: user.id,
-			label: resolveManagedIdentityName(user)
-		}))
-	}), [agents.data, users.data]);
+	const candidates = useMemo(() => {
+		const current = (data) => data && data.filter === filter ? data.page : void 0;
+		return {
+			agent: (current(agents.data)?.agents ?? []).map((agent) => ({
+				id: agent.id,
+				label: getAgentName(agent)
+			})),
+			user: (current(users.data)?.users ?? []).map((user) => ({
+				id: user.id,
+				label: resolveManagedIdentityName(user)
+			}))
+		};
+	}, [
+		agents.data,
+		filter,
+		users.data
+	]);
 	return /* @__PURE__ */ jsx(BaseGroupMembers_default, {
 		members: members.data?.members ?? [],
 		isLoading: members.isLoading,

package/dist/components/admin/GroupMembers/GroupMembers.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupMembers.js","names":["GroupMembers: FC<GroupMembersProps>","useTranslation","groupsEndpoint: ManagementEndpoint","useManagementEndpoint","usersEndpoint: ManagementEndpoint","agentsEndpoint: ManagementEndpoint","members: ResourceQueryResult<GroupMemberListResponse>","useResourceQuery","users: ResourceQueryResult<ManagedUserListResponse>","agents: ResourceQueryResult<AgentListResponse>","add: ResourceMutationResult<Group, GroupMembersVariables>","useResourceMutation","remove: ResourceMutationResult<Group, GroupMembersVariables>","candidates: Partial<Record<'user' | 'agent', IdentityCandidate[]>>","BaseGroupMembers"],"sources":["../../../../src/components/admin/GroupMembers/GroupMembers.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  AdministrationMode,\n  AgentListResponse,\n  AgentQueryKeys,\n  BasicAgent,\n  Group,\n  GroupMember,\n  GroupMemberListResponse,\n  GroupQueryKeys,\n  ManagedUser,\n  ManagedUserListResponse,\n  ResourceQueryKey,\n  RoleQueryKeys,\n  UserQueryKeys,\n  addGroupMembers,\n  getAgentName,\n  getAgents,\n  getGroupMembers,\n  getUsers,\n  removeGroupMembers,\n  resolveManagedIdentityName,\n  toManagementErrorMessage,\n} from '@thunderid/browser';\nimport {FC, ReactElement, useMemo} from 'react';\nimport BaseGroupMembers, {BaseGroupMembersProps} from './BaseGroupMembers';\nimport useManagementEndpoint, {ManagementEndpoint} from '../../../hooks/management/useManagementEndpoint';\nimport useResourceMutation, {ResourceMutationResult} from '../../../hooks/management/useResourceMutation';\nimport useResourceQuery, {ResourceQueryResult} from '../../../hooks/management/useResourceQuery';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {IdentityCandidate} from '../shared/IdentityPicker';\n\ninterface GroupMembersVariables {\n  groupId: string;\n  members: Pick<GroupMember, 'id' | 'type'>[];\n}\n\n/**\n * Query keys to refetch after a group's membership changes.\n */\nconst getMembershipInvalidatedKeys = ({groupId}: GroupMembersVariables): ResourceQueryKey[] => [\n  [GroupQueryKeys.GROUP, groupId],\n  [GroupQueryKeys.GROUP_MEMBERS, groupId],\n  [GroupQueryKeys.MEMBERSHIPS],\n  [RoleQueryKeys.ROLE_ASSIGNMENTS],\n];\n\nexport type GroupMembersProps = Omit<\n  BaseGroupMembersProps,\n  'candidates' | 'error' | 'isLoading' | 'isMutating' | 'members' | 'onAdd' | 'onRemove'\n> & {\n  /**\n   * How a member is removed. `flow` runs the administration flow the server configures for it, which can revoke\n   * grants and end sessions first. It needs `baseUrl`.\n   * @default 'native'\n   */\n  administrationMode?: AdministrationMode;\n  /**\n   * Whether members can be added and removed from this view.\n   * @default false\n   */\n  editable?: boolean;\n  groupId: string;\n};\n\n/**\n * Lists the users and agents in a group, and lets the signed-in user add and remove them.\n *\n * @example\n * ```tsx\n * <GroupMembers groupId={groupId} />\n * ```\n */\nconst GroupMembers: FC<GroupMembersProps> = ({\n  administrationMode,\n  editable = false,\n  groupId,\n  preferences,\n  ...rest\n}: GroupMembersProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const groupsEndpoint: ManagementEndpoint = useManagementEndpoint('groups');\n  const usersEndpoint: ManagementEndpoint = useManagementEndpoint('users');\n  const agentsEndpoint: ManagementEndpoint = useManagementEndpoint('agents');\n  const members: ResourceQueryResult<GroupMemberListResponse> = useResourceQuery(\n    [GroupQueryKeys.GROUP_MEMBERS, groupId, {limit: 100}],\n    (fetcher) => getGroupMembers({...groupsEndpoint, fetcher, groupId, limit: 100}),\n    {enabled: Boolean(groupId)},\n  );\n  const users: ResourceQueryResult<ManagedUserListResponse> = useResourceQuery(\n    [UserQueryKeys.USERS, {limit: 100}],\n    (fetcher) => getUsers({...usersEndpoint, fetcher, limit: 100}),\n    {enabled: editable},\n  );\n  const agents: ResourceQueryResult<AgentListResponse> = useResourceQuery(\n    [AgentQueryKeys.AGENTS, {limit: 100}],\n    (fetcher) => getAgents({...agentsEndpoint, fetcher, limit: 100}),\n    {enabled: editable},\n  );\n  const add: ResourceMutationResult<Group, GroupMembersVariables> = useResourceMutation(\n    ({groupId: id, members: changes}: GroupMembersVariables, fetcher) =>\n      addGroupMembers({...groupsEndpoint, fetcher, groupId: id, members: changes}),\n    getMembershipInvalidatedKeys,\n  );\n  const remove: ResourceMutationResult<Group, GroupMembersVariables> = useResourceMutation(\n    ({groupId: id, members: changes}: GroupMembersVariables, fetcher) =>\n      removeGroupMembers({...groupsEndpoint, administrationMode, fetcher, groupId: id, members: changes}),\n    getMembershipInvalidatedKeys,\n  );\n\n  const candidates: Partial<Record<'user' | 'agent', IdentityCandidate[]>> = useMemo(\n    () => ({\n      agent: (agents.data?.agents ?? []).map((agent: BasicAgent) => ({id: agent.id, label: getAgentName(agent)})),\n      user: (users.data?.users ?? []).map((user: ManagedUser) => ({\n        id: user.id,\n        label: resolveManagedIdentityName(user),\n      })),\n    }),\n    [agents.data, users.data],\n  );\n\n  return (\n    <BaseGroupMembers\n      members={members.data?.members ?? []}\n      isLoading={members.isLoading}\n      isMutating={add.isLoading || remove.isLoading}\n      error={\n        toManagementErrorMessage(t, members.error, 'admin.groups.members.error') ??\n        toManagementErrorMessage(t, add.error ?? remove.error, 'admin.groups.members.update_error')\n      }\n      candidates={editable ? candidates : undefined}\n      onAdd={\n        editable\n          ? (member: Pick<GroupMember, 'id' | 'type'>): void => void add.mutate({groupId, members: [member]})\n          : undefined\n      }\n      onRemove={\n        editable\n          ? (member: GroupMember): void => void remove.mutate({groupId, members: [{id: member.id, type: member.type}]})\n          : undefined\n      }\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default GroupMembers;\n"],"mappings":";;;;;;;;;;;;;AA0CA,MAAM,gCAAgC,EAAC,cAAwD;CAC7F,CAAC,eAAe,OAAO,QAAQ;CAC/B,CAAC,eAAe,eAAe,QAAQ;CACvC,CAAC,eAAe,YAAY;CAC5B,CAAC,cAAc,iBAAiB;CACjC;;;;;;;;;AA4BD,MAAMA,gBAAuC,EAC3C,oBACA,WAAW,OACX,SACA,YACA,GAAG,WACkC;CACrC,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAMC,iBAAqCC,8BAAsB,SAAS;CAC1E,MAAMC,gBAAoCD,8BAAsB,QAAQ;CACxE,MAAME,iBAAqCF,8BAAsB,SAAS;CAC1E,MAAMG,UAAwDC,yBAC5D;EAAC,eAAe;EAAe;EAAS,EAAC,OAAO,KAAI;EAAC,GACpD,YAAY,gBAAgB;EAAC,GAAG;EAAgB;EAAS;EAAS,OAAO;EAAI,CAAC,EAC/E,EAAC,SAAS,QAAQ,QAAQ,EAAC,CAC5B;CACD,MAAMC,QAAsDD,yBAC1D,CAAC,cAAc,OAAO,EAAC,OAAO,KAAI,CAAC,GAClC,YAAY,SAAS;EAAC,GAAG;EAAe;EAAS,OAAO;EAAI,CAAC,EAC9D,EAAC,SAAS,UAAS,CACpB;CACD,MAAME,SAAiDF,yBACrD,CAAC,eAAe,QAAQ,EAAC,OAAO,KAAI,CAAC,GACpC,YAAY,UAAU;EAAC,GAAG;EAAgB;EAAS,OAAO;EAAI,CAAC,EAChE,EAAC,SAAS,UAAS,CACpB;CACD,MAAMG,MAA4DC,6BAC/D,EAAC,SAAS,IAAI,SAAS,WAAiC,YACvD,gBAAgB;EAAC,GAAG;EAAgB;EAAS,SAAS;EAAI,SAAS;EAAQ,CAAC,EAC9E,6BACD;CACD,MAAMC,SAA+DD,6BAClE,EAAC,SAAS,IAAI,SAAS,WAAiC,YACvD,mBAAmB;EAAC,GAAG;EAAgB;EAAoB;EAAS,SAAS;EAAI,SAAS;EAAQ,CAAC,EACrG,6BACD;CAED,MAAME,aAAqE,eAClE;EACL,QAAQ,OAAO,MAAM,UAAU,EAAE,EAAE,KAAK,WAAuB;GAAC,IAAI,MAAM;GAAI,OAAO,aAAa,MAAM;GAAC,EAAE;EAC3G,OAAO,MAAM,MAAM,SAAS,EAAE,EAAE,KAAK,UAAuB;GAC1D,IAAI,KAAK;GACT,OAAO,2BAA2B,KAAK;GACxC,EAAE;EACJ,GACD,CAAC,OAAO,MAAM,MAAM,KAAK,CAC1B;AAED,QACE,oBAACC;EACC,SAAS,QAAQ,MAAM,WAAW,EAAE;EACpC,WAAW,QAAQ;EACnB,YAAY,IAAI,aAAa,OAAO;EACpC,OACE,yBAAyB,GAAG,QAAQ,OAAO,6BAA6B,IACxE,yBAAyB,GAAG,IAAI,SAAS,OAAO,OAAO,oCAAoC;EAE7F,YAAY,WAAW,aAAa;EACpC,OACE,YACK,WAAmD,KAAK,IAAI,OAAO;GAAC;GAAS,SAAS,CAAC,OAAO;GAAC,CAAC,GACjG;EAEN,UACE,YACK,WAA8B,KAAK,OAAO,OAAO;GAAC;GAAS,SAAS,CAAC;IAAC,IAAI,OAAO;IAAI,MAAM,OAAO;IAAK,CAAC;GAAC,CAAC,GAC3G;EAEO;EACb,GAAI;GACJ;;AAIN,2BAAe"}
+{"version":3,"file":"GroupMembers.js","names":["GroupMembers: FC<GroupMembersProps>","useTranslation","groupsEndpoint: ManagementEndpoint","useManagementEndpoint","usersEndpoint: ManagementEndpoint","agentsEndpoint: ManagementEndpoint","filter: string | undefined","members: ResourceQueryResult<GroupMemberListResponse>","useResourceQuery","users: ResourceQueryResult<FilteredPage<ManagedUserListResponse>>","agents: ResourceQueryResult<FilteredPage<AgentListResponse>>","add: ResourceMutationResult<Group, GroupMembersVariables>","useResourceMutation","remove: ResourceMutationResult<Group, GroupMembersVariables>","candidates: Partial<Record<'user' | 'agent', IdentityCandidate[]>>","BaseGroupMembers"],"sources":["../../../../src/components/admin/GroupMembers/GroupMembers.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  AdministrationMode,\n  AgentListResponse,\n  AgentQueryKeys,\n  BasicAgent,\n  Group,\n  GroupMember,\n  GroupMemberListResponse,\n  GroupQueryKeys,\n  ManagedUser,\n  ManagedUserListResponse,\n  ResourceQueryKey,\n  RoleQueryKeys,\n  UserQueryKeys,\n  addGroupMembers,\n  getAgentName,\n  getAgents,\n  getGroupMembers,\n  getUsers,\n  removeGroupMembers,\n  resolveManagedIdentityName,\n  toEqualityFilter,\n  toManagementErrorMessage,\n} from '@thunderid/browser';\nimport {FC, ReactElement, useMemo} from 'react';\nimport BaseGroupMembers, {BaseGroupMembersProps} from './BaseGroupMembers';\nimport useManagementEndpoint, {ManagementEndpoint} from '../../../hooks/management/useManagementEndpoint';\nimport useResourceMutation, {ResourceMutationResult} from '../../../hooks/management/useResourceMutation';\nimport useResourceQuery, {ResourceQueryResult} from '../../../hooks/management/useResourceQuery';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {IdentityCandidate} from '../shared/IdentityPicker';\n\ninterface GroupMembersVariables {\n  groupId: string;\n  members: Pick<GroupMember, 'id' | 'type'>[];\n}\n\n/**\n * A candidate page with the filter it was listed with.\n */\ninterface FilteredPage<T> {\n  filter: string | undefined;\n  page: T;\n}\n\n/**\n * Query keys to refetch after a group's membership changes.\n */\nconst getMembershipInvalidatedKeys = ({groupId}: GroupMembersVariables): ResourceQueryKey[] => [\n  [GroupQueryKeys.GROUP, groupId],\n  [GroupQueryKeys.GROUP_MEMBERS, groupId],\n  [GroupQueryKeys.MEMBERSHIPS],\n  [RoleQueryKeys.ROLE_ASSIGNMENTS],\n];\n\nexport type GroupMembersProps = Omit<\n  BaseGroupMembersProps,\n  'candidates' | 'error' | 'isLoading' | 'isMutating' | 'members' | 'onAdd' | 'onRemove'\n> & {\n  /**\n   * How a member is removed. `flow` runs the administration flow the server configures for it, which can revoke\n   * grants and end sessions first. It needs `baseUrl`.\n   * @default 'native'\n   */\n  administrationMode?: AdministrationMode;\n  /**\n   * Whether members can be added and removed from this view.\n   * @default false\n   */\n  editable?: boolean;\n  groupId: string;\n  /**\n   * Organization unit the users and agents offered for adding are listed from.\n   */\n  ouId?: string;\n};\n\n/**\n * Lists the users and agents in a group, and lets the signed-in user add and remove them.\n *\n * @example\n * ```tsx\n * <GroupMembers groupId={groupId} />\n * ```\n */\nconst GroupMembers: FC<GroupMembersProps> = ({\n  administrationMode,\n  editable = false,\n  groupId,\n  ouId,\n  preferences,\n  ...rest\n}: GroupMembersProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const groupsEndpoint: ManagementEndpoint = useManagementEndpoint('groups');\n  const usersEndpoint: ManagementEndpoint = useManagementEndpoint('users');\n  const agentsEndpoint: ManagementEndpoint = useManagementEndpoint('agents');\n  const filter: string | undefined = toEqualityFilter('ouId', ouId);\n  const members: ResourceQueryResult<GroupMemberListResponse> = useResourceQuery(\n    [GroupQueryKeys.GROUP_MEMBERS, groupId, {limit: 100}],\n    (fetcher) => getGroupMembers({...groupsEndpoint, fetcher, groupId, limit: 100}),\n    {enabled: Boolean(groupId)},\n  );\n  const users: ResourceQueryResult<FilteredPage<ManagedUserListResponse>> = useResourceQuery(\n    [UserQueryKeys.USERS, {filter, limit: 100}],\n    async (fetcher) => ({filter, page: await getUsers({...usersEndpoint, fetcher, filter, limit: 100})}),\n    {enabled: editable},\n  );\n  const agents: ResourceQueryResult<FilteredPage<AgentListResponse>> = useResourceQuery(\n    [AgentQueryKeys.AGENTS, {filter, limit: 100}],\n    async (fetcher) => ({filter, page: await getAgents({...agentsEndpoint, fetcher, filter, limit: 100})}),\n    {enabled: editable},\n  );\n  const add: ResourceMutationResult<Group, GroupMembersVariables> = useResourceMutation(\n    ({groupId: id, members: changes}: GroupMembersVariables, fetcher) =>\n      addGroupMembers({...groupsEndpoint, fetcher, groupId: id, members: changes}),\n    getMembershipInvalidatedKeys,\n  );\n  const remove: ResourceMutationResult<Group, GroupMembersVariables> = useResourceMutation(\n    ({groupId: id, members: changes}: GroupMembersVariables, fetcher) =>\n      removeGroupMembers({...groupsEndpoint, administrationMode, fetcher, groupId: id, members: changes}),\n    getMembershipInvalidatedKeys,\n  );\n\n  const candidates: Partial<Record<'user' | 'agent', IdentityCandidate[]>> = useMemo(() => {\n    // A page listed for an earlier ouId stays in a query until the next one succeeds, so it is not offered.\n    const current = <T,>(data: FilteredPage<T> | undefined): T | undefined =>\n      data && data.filter === filter ? data.page : undefined;\n\n    return {\n      agent: (current(agents.data)?.agents ?? []).map((agent: BasicAgent) => ({\n        id: agent.id,\n        label: getAgentName(agent),\n      })),\n      user: (current(users.data)?.users ?? []).map((user: ManagedUser) => ({\n        id: user.id,\n        label: resolveManagedIdentityName(user),\n      })),\n    };\n  }, [agents.data, filter, users.data]);\n\n  return (\n    <BaseGroupMembers\n      members={members.data?.members ?? []}\n      isLoading={members.isLoading}\n      isMutating={add.isLoading || remove.isLoading}\n      error={\n        toManagementErrorMessage(t, members.error, 'admin.groups.members.error') ??\n        toManagementErrorMessage(t, add.error ?? remove.error, 'admin.groups.members.update_error')\n      }\n      candidates={editable ? candidates : undefined}\n      onAdd={\n        editable\n          ? (member: Pick<GroupMember, 'id' | 'type'>): void => void add.mutate({groupId, members: [member]})\n          : undefined\n      }\n      onRemove={\n        editable\n          ? (member: GroupMember): void => void remove.mutate({groupId, members: [{id: member.id, type: member.type}]})\n          : undefined\n      }\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default GroupMembers;\n"],"mappings":";;;;;;;;;;;;;AAmDA,MAAM,gCAAgC,EAAC,cAAwD;CAC7F,CAAC,eAAe,OAAO,QAAQ;CAC/B,CAAC,eAAe,eAAe,QAAQ;CACvC,CAAC,eAAe,YAAY;CAC5B,CAAC,cAAc,iBAAiB;CACjC;;;;;;;;;AAgCD,MAAMA,gBAAuC,EAC3C,oBACA,WAAW,OACX,SACA,MACA,YACA,GAAG,WACkC;CACrC,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAMC,iBAAqCC,8BAAsB,SAAS;CAC1E,MAAMC,gBAAoCD,8BAAsB,QAAQ;CACxE,MAAME,iBAAqCF,8BAAsB,SAAS;CAC1E,MAAMG,SAA6B,iBAAiB,QAAQ,KAAK;CACjE,MAAMC,UAAwDC,yBAC5D;EAAC,eAAe;EAAe;EAAS,EAAC,OAAO,KAAI;EAAC,GACpD,YAAY,gBAAgB;EAAC,GAAG;EAAgB;EAAS;EAAS,OAAO;EAAI,CAAC,EAC/E,EAAC,SAAS,QAAQ,QAAQ,EAAC,CAC5B;CACD,MAAMC,QAAoED,yBACxE,CAAC,cAAc,OAAO;EAAC;EAAQ,OAAO;EAAI,CAAC,EAC3C,OAAO,aAAa;EAAC;EAAQ,MAAM,MAAM,SAAS;GAAC,GAAG;GAAe;GAAS;GAAQ,OAAO;GAAI,CAAC;EAAC,GACnG,EAAC,SAAS,UAAS,CACpB;CACD,MAAME,SAA+DF,yBACnE,CAAC,eAAe,QAAQ;EAAC;EAAQ,OAAO;EAAI,CAAC,EAC7C,OAAO,aAAa;EAAC;EAAQ,MAAM,MAAM,UAAU;GAAC,GAAG;GAAgB;GAAS;GAAQ,OAAO;GAAI,CAAC;EAAC,GACrG,EAAC,SAAS,UAAS,CACpB;CACD,MAAMG,MAA4DC,6BAC/D,EAAC,SAAS,IAAI,SAAS,WAAiC,YACvD,gBAAgB;EAAC,GAAG;EAAgB;EAAS,SAAS;EAAI,SAAS;EAAQ,CAAC,EAC9E,6BACD;CACD,MAAMC,SAA+DD,6BAClE,EAAC,SAAS,IAAI,SAAS,WAAiC,YACvD,mBAAmB;EAAC,GAAG;EAAgB;EAAoB;EAAS,SAAS;EAAI,SAAS;EAAQ,CAAC,EACrG,6BACD;CAED,MAAME,aAAqE,cAAc;EAEvF,MAAM,WAAe,SACnB,QAAQ,KAAK,WAAW,SAAS,KAAK,OAAO;AAE/C,SAAO;GACL,QAAQ,QAAQ,OAAO,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,WAAuB;IACtE,IAAI,MAAM;IACV,OAAO,aAAa,MAAM;IAC3B,EAAE;GACH,OAAO,QAAQ,MAAM,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,UAAuB;IACnE,IAAI,KAAK;IACT,OAAO,2BAA2B,KAAK;IACxC,EAAE;GACJ;IACA;EAAC,OAAO;EAAM;EAAQ,MAAM;EAAK,CAAC;AAErC,QACE,oBAACC;EACC,SAAS,QAAQ,MAAM,WAAW,EAAE;EACpC,WAAW,QAAQ;EACnB,YAAY,IAAI,aAAa,OAAO;EACpC,OACE,yBAAyB,GAAG,QAAQ,OAAO,6BAA6B,IACxE,yBAAyB,GAAG,IAAI,SAAS,OAAO,OAAO,oCAAoC;EAE7F,YAAY,WAAW,aAAa;EACpC,OACE,YACK,WAAmD,KAAK,IAAI,OAAO;GAAC;GAAS,SAAS,CAAC,OAAO;GAAC,CAAC,GACjG;EAEN,UACE,YACK,WAA8B,KAAK,OAAO,OAAO;GAAC;GAAS,SAAS,CAAC;IAAC,IAAI,OAAO;IAAI,MAAM,OAAO;IAAK,CAAC;GAAC,CAAC,GAC3G;EAEO;EACb,GAAI;GACJ;;AAIN,2BAAe"}

package/dist/components/auth/AcceptInvite/BaseAcceptInvite.js

@@ -7,8 +7,8 @@ import { extractErrorMessage, normalizeFlowResponse } from "../../../utils/flowT
 import Spinner_default from "../../primitives/Spinner/Spinner.js";
 import Button_default from "../../primitives/Button/Button.js";
 import Typography_default from "../../primitives/Typography/Typography.js";
-import Alert_default from "../../primitives/Alert/Alert.js";
 import Card_default from "../../primitives/Card/Card.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
 import isConsentApprovalBlocked_default from "../../../utils/isConsentApprovalBlocked.js";
 import { renderInviteUserComponents } from "../flow/AuthOptionFactory.js";
 import { useOAuthCallback } from "../../../hooks/auth/useOAuthCallback.js";

package/dist/components/auth/DeviceGrant/BaseDeviceGrant.d.ts

@@ -0,0 +1,17 @@
+import type { EmbeddedFlowComponent } from '@thunderid/browser';
+import { FC } from 'react';
+import { type BaseSignInProps } from '../SignIn/BaseSignIn';
+export type DeviceGrantResult = 'failure' | 'success' | null;
+export interface BaseDeviceGrantProps extends Omit<BaseSignInProps, 'components' | 'onSubmit'> {
+    components: EmbeddedFlowComponent[];
+    completeMessage?: string;
+    completeDescription?: string;
+    failedMessage?: string;
+    failedDescription?: string;
+    onSubmit: NonNullable<BaseSignInProps['onSubmit']>;
+    result?: DeviceGrantResult;
+}
+/** Renders the server-described Device Grant prompt independently of SDK orchestration. */
+declare const BaseDeviceGrant: FC<BaseDeviceGrantProps>;
+export default BaseDeviceGrant;
+//# sourceMappingURL=BaseDeviceGrant.d.ts.map

package/dist/components/auth/DeviceGrant/BaseDeviceGrant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDeviceGrant.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/DeviceGrant/BaseDeviceGrant.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,EAAE,EAAe,MAAM,OAAO,CAAC;AAMvC,OAAmB,EAAC,KAAK,eAAe,EAAC,MAAM,sBAAsB,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;AAE7D,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,UAAU,CAAC;IAC5F,UAAU,EAAE,qBAAqB,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,WAAW,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,2FAA2F;AAC3F,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAgE7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/auth/DeviceGrant/BaseDeviceGrant.js

@@ -0,0 +1,58 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseDeviceGrant_styles_default from "./BaseDeviceGrant.styles.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import Card_default from "../../primitives/Card/Card.js";
+import BaseSignIn_default from "../SignIn/BaseSignIn.js";
+import { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/auth/DeviceGrant/BaseDeviceGrant.tsx
+/** Renders the server-described Device Grant prompt independently of SDK orchestration. */
+const BaseDeviceGrant = ({ components, className = "", completeMessage = void 0, completeDescription = void 0, failedMessage = void 0, failedDescription = void 0, error, isLoading, preferences, result = null, variant = "default",...signInProps }) => {
+	const { theme } = useTheme_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const styles = BaseDeviceGrant_styles_default(theme);
+	if ((error || result) && components.length === 0) {
+		const isSuccess = result === "success" && !error;
+		const resolvedCompleteMessage = completeMessage ?? t("deviceGrant.messages.complete");
+		const resolvedCompleteDescription = completeDescription ?? t("deviceGrant.messages.completeDescription");
+		const resolvedFailedMessage = failedMessage ?? t("deviceGrant.messages.failed");
+		const resolvedFailedDescription = failedDescription ?? t("deviceGrant.messages.failedDescription");
+		const title = isSuccess ? resolvedCompleteMessage : resolvedFailedMessage;
+		const description = isSuccess ? resolvedCompleteDescription : !error || error.message === resolvedFailedMessage ? resolvedFailedDescription : error.message;
+		return /* @__PURE__ */ jsxs(Card_default, {
+			className: `${styles["terminalCard"]} ${className}`,
+			"data-testid": "device-grant-result",
+			variant,
+			children: [/* @__PURE__ */ jsx(Typography_default, {
+				className: styles["terminalTitle"],
+				color: isSuccess ? "success" : "error",
+				component: "h2",
+				fontWeight: 600,
+				variant: "h6",
+				children: title
+			}), /* @__PURE__ */ jsx(Typography_default, {
+				className: styles["terminalDescription"],
+				color: "textSecondary",
+				component: "p",
+				variant: "caption",
+				children: description
+			})]
+		});
+	}
+	return /* @__PURE__ */ createElement(BaseSignIn_default, {
+		...signInProps,
+		className,
+		key: components.map((component) => component.id).join("|"),
+		components,
+		error,
+		isLoading,
+		preferences
+	});
+};
+var BaseDeviceGrant_default = BaseDeviceGrant;
+
+//#endregion
+export { BaseDeviceGrant_default as default };
+//# sourceMappingURL=BaseDeviceGrant.js.map

package/dist/components/auth/DeviceGrant/BaseDeviceGrant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDeviceGrant.js","names":["BaseDeviceGrant: FC<BaseDeviceGrantProps>","useTheme","useTranslation","useStyles","CardPrimitive","Typography","BaseSignIn"],"sources":["../../../../src/components/auth/DeviceGrant/BaseDeviceGrant.tsx"],"sourcesContent":["// Copyright 2025-2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {EmbeddedFlowComponent} from '@thunderid/browser';\nimport {FC, ReactElement} from 'react';\nimport useStyles from './BaseDeviceGrant.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport CardPrimitive from '../../primitives/Card/Card';\nimport Typography from '../../primitives/Typography/Typography';\nimport BaseSignIn, {type BaseSignInProps} from '../SignIn/BaseSignIn';\n\nexport type DeviceGrantResult = 'failure' | 'success' | null;\n\nexport interface BaseDeviceGrantProps extends Omit<BaseSignInProps, 'components' | 'onSubmit'> {\n  components: EmbeddedFlowComponent[];\n  completeMessage?: string;\n  completeDescription?: string;\n  failedMessage?: string;\n  failedDescription?: string;\n  onSubmit: NonNullable<BaseSignInProps['onSubmit']>;\n  result?: DeviceGrantResult;\n}\n\n/** Renders the server-described Device Grant prompt independently of SDK orchestration. */\nconst BaseDeviceGrant: FC<BaseDeviceGrantProps> = ({\n  components,\n  className = '',\n  completeMessage = undefined,\n  completeDescription = undefined,\n  failedMessage = undefined,\n  failedDescription = undefined,\n  error,\n  isLoading,\n  preferences,\n  result = null,\n  variant = 'default',\n  ...signInProps\n}: BaseDeviceGrantProps): ReactElement => {\n  const {theme} = useTheme();\n  const {t} = useTranslation(preferences?.i18n);\n  const styles = useStyles(theme);\n\n  if ((error || result) && components.length === 0) {\n    const isSuccess = result === 'success' && !error;\n    const resolvedCompleteMessage = completeMessage ?? t('deviceGrant.messages.complete');\n    const resolvedCompleteDescription = completeDescription ?? t('deviceGrant.messages.completeDescription');\n    const resolvedFailedMessage = failedMessage ?? t('deviceGrant.messages.failed');\n    const resolvedFailedDescription = failedDescription ?? t('deviceGrant.messages.failedDescription');\n    const title = isSuccess ? resolvedCompleteMessage : resolvedFailedMessage;\n    const description = isSuccess\n      ? resolvedCompleteDescription\n      : !error || error.message === resolvedFailedMessage\n        ? resolvedFailedDescription\n        : error.message;\n\n    return (\n      <CardPrimitive\n        className={`${styles['terminalCard']} ${className}`}\n        data-testid=\"device-grant-result\"\n        variant={variant}\n      >\n        <Typography\n          className={styles['terminalTitle']}\n          color={isSuccess ? 'success' : 'error'}\n          component=\"h2\"\n          fontWeight={600}\n          variant=\"h6\"\n        >\n          {title}\n        </Typography>\n        <Typography className={styles['terminalDescription']} color=\"textSecondary\" component=\"p\" variant=\"caption\">\n          {description}\n        </Typography>\n      </CardPrimitive>\n    );\n  }\n\n  return (\n    <BaseSignIn\n      {...signInProps}\n      className={className}\n      key={components.map((component: EmbeddedFlowComponent) => component.id).join('|')}\n      components={components}\n      error={error}\n      isLoading={isLoading}\n      preferences={preferences}\n    />\n  );\n};\n\nexport default BaseDeviceGrant;\n"],"mappings":";;;;;;;;;;;AAyBA,MAAMA,mBAA6C,EACjD,YACA,YAAY,IACZ,kBAAkB,QAClB,sBAAsB,QACtB,gBAAgB,QAChB,oBAAoB,QACpB,OACA,WACA,aACA,SAAS,MACT,UAAU,UACV,GAAG,kBACqC;CACxC,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,SAASC,+BAAU,MAAM;AAE/B,MAAK,SAAS,WAAW,WAAW,WAAW,GAAG;EAChD,MAAM,YAAY,WAAW,aAAa,CAAC;EAC3C,MAAM,0BAA0B,mBAAmB,EAAE,gCAAgC;EACrF,MAAM,8BAA8B,uBAAuB,EAAE,2CAA2C;EACxG,MAAM,wBAAwB,iBAAiB,EAAE,8BAA8B;EAC/E,MAAM,4BAA4B,qBAAqB,EAAE,yCAAyC;EAClG,MAAM,QAAQ,YAAY,0BAA0B;EACpD,MAAM,cAAc,YAChB,8BACA,CAAC,SAAS,MAAM,YAAY,wBAC1B,4BACA,MAAM;AAEZ,SACE,qBAACC;GACC,WAAW,GAAG,OAAO,gBAAgB,GAAG;GACxC,eAAY;GACH;cAET,oBAACC;IACC,WAAW,OAAO;IAClB,OAAO,YAAY,YAAY;IAC/B,WAAU;IACV,YAAY;IACZ,SAAQ;cAEP;KACU,EACb,oBAACA;IAAW,WAAW,OAAO;IAAwB,OAAM;IAAgB,WAAU;IAAI,SAAQ;cAC/F;KACU;IACC;;AAIpB,QACE,8BAACC;EACC,GAAI;EACO;EACX,KAAK,WAAW,KAAK,cAAqC,UAAU,GAAG,CAAC,KAAK,IAAI;EACrE;EACL;EACI;EACE;GACb;;AAIN,8BAAe"}

package/dist/components/auth/DeviceGrant/BaseDeviceGrant.styles.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '@thunderid/browser';
+declare const useStyles: (theme: Theme) => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=BaseDeviceGrant.styles.d.ts.map

package/dist/components/auth/DeviceGrant/BaseDeviceGrant.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDeviceGrant.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/DeviceGrant/BaseDeviceGrant.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAkBpD,CAAC;AAEJ,eAAe,SAAS,CAAC"}

package/dist/components/auth/DeviceGrant/BaseDeviceGrant.styles.js

@@ -0,0 +1,24 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/auth/DeviceGrant/BaseDeviceGrant.styles.ts
+const useStyles = (theme) => useMemo(() => ({
+	terminalCard: css`
+        box-sizing: border-box;
+        width: 100%;
+        max-width: calc(${theme.vars.spacing.unit} * 60);
+        margin: 0 auto;
+        gap: ${theme.vars.spacing.unit};
+      `,
+	terminalDescription: css`
+        margin: 0;
+      `,
+	terminalTitle: css`
+        margin: 0;
+      `
+}), [theme]);
+var BaseDeviceGrant_styles_default = useStyles;
+
+//#endregion
+export { BaseDeviceGrant_styles_default as default };
+//# sourceMappingURL=BaseDeviceGrant.styles.js.map

package/dist/components/auth/DeviceGrant/BaseDeviceGrant.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDeviceGrant.styles.js","names":[],"sources":["../../../../src/components/auth/DeviceGrant/BaseDeviceGrant.styles.ts"],"sourcesContent":["// Copyright 2025-2026 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\nconst useStyles = (theme: Theme): Record<string, string> =>\n  useMemo(\n    () => ({\n      terminalCard: css`\n        box-sizing: border-box;\n        width: 100%;\n        max-width: calc(${theme.vars.spacing.unit} * 60);\n        margin: 0 auto;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      terminalDescription: css`\n        margin: 0;\n      `,\n      terminalTitle: css`\n        margin: 0;\n      `,\n    }),\n    [theme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;AAOA,MAAM,aAAa,UACjB,eACS;CACL,cAAc,GAAG;;;0BAGG,MAAM,KAAK,QAAQ,KAAK;;eAEnC,MAAM,KAAK,QAAQ,KAAK;;CAEjC,qBAAqB,GAAG;;;CAGxB,eAAe,GAAG;;;CAGnB,GACD,CAAC,MAAM,CACR;AAEH,qCAAe"}

package/dist/components/auth/DeviceGrant/DeviceGrant.d.ts

@@ -0,0 +1,37 @@
+import { executeEmbeddedDeviceGrantFlow } from '@thunderid/browser';
+import type { EmbeddedFlowComponent, EmbeddedSignInFlowRequest, FlowMetadataResponse } from '@thunderid/browser';
+import type { FC, ReactNode } from 'react';
+import { type BaseDeviceGrantProps, type DeviceGrantResult } from './BaseDeviceGrant';
+type EmbeddedDeviceGrantFlowResponse = Awaited<ReturnType<typeof executeEmbeddedDeviceGrantFlow>>;
+/** Values exposed to consumers that provide custom Device Grant UI. */
+export interface DeviceGrantRenderProps {
+    /** Additional values returned for the active flow step. */
+    additionalData: Record<string, unknown>;
+    /** Components returned by the configured flow. */
+    components: EmbeddedFlowComponent[];
+    /** Current flow error, when one needs to be shown. */
+    error: Error | null;
+    /** First server validation message for each field. */
+    fieldErrors: Record<string, string>;
+    /** Values prefilled from the verification URI. */
+    initialValues: Record<string, string>;
+    /** Whether a flow request is in progress. */
+    isLoading: boolean;
+    /** Flow metadata used to resolve application-specific template values. */
+    meta: FlowMetadataResponse | null;
+    /** Submits user-code input or continues the active flow. */
+    onSubmit: (payload: EmbeddedSignInFlowRequest) => Promise<void>;
+    /** Terminal flow result when the flow has no configured prompt to render. */
+    result: DeviceGrantResult;
+}
+export type DeviceGrantProps = Omit<BaseDeviceGrantProps, 'children' | 'components' | 'error' | 'initialValues' | 'isLoading' | 'onSubmit' | 'result' | 'serverFieldErrors'> & {
+    /** Render props for Gate or other consumers that provide their own flow UI. */
+    children?: (props: DeviceGrantRenderProps) => ReactNode;
+    onComplete?: (response: EmbeddedDeviceGrantFlowResponse) => void;
+};
+/**
+ * Runs the application's configured Device Grant flow and exposes its state for custom renderers.
+ */
+declare const DeviceGrant: FC<DeviceGrantProps>;
+export default DeviceGrant;
+//# sourceMappingURL=DeviceGrant.d.ts.map

package/dist/components/auth/DeviceGrant/DeviceGrant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceGrant.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/DeviceGrant/DeviceGrant.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA6C,8BAA8B,EAAC,MAAM,oBAAoB,CAAC;AAC9G,OAAO,KAAK,EAAC,qBAAqB,EAAE,yBAAyB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAE/G,OAAO,KAAK,EAAC,EAAE,EAAgB,SAAS,EAAC,MAAM,OAAO,CAAC;AACvD,OAAwB,EAAC,KAAK,oBAAoB,EAAE,KAAK,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAKrG,KAAK,+BAA+B,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC,CAAC;AAGlG,uEAAuE;AACvE,MAAM,WAAW,sBAAsB;IACrC,2DAA2D;IAC3D,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,kDAAkD;IAClD,UAAU,EAAE,qBAAqB,EAAE,CAAC;IACpC,sDAAsD;IACtD,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,sDAAsD;IACtD,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,kDAAkD;IAClD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClC,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,6EAA6E;IAC7E,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,eAAe,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,mBAAmB,CAClH,GAAG;IACF,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,+BAA+B,KAAK,IAAI,CAAC;CAClE,CAAC;AAgBF;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA0MrC,CAAC;AAEF,eAAe,WAAW,CAAC"}