@qssolutions/ssas-registration-form 2.0.0 → 2.0.2

package/dist/web-component.js

@@ -36328,6 +36328,555 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	    strokeWidthThickest: '4px'
 	};
 
+	const tokens = {
+	    // Color tokens
+	    colorNeutralForeground1: 'var(--colorNeutralForeground1)',
+	    colorNeutralForeground1Hover: 'var(--colorNeutralForeground1Hover)',
+	    colorNeutralForeground1Pressed: 'var(--colorNeutralForeground1Pressed)',
+	    colorNeutralForeground1Selected: 'var(--colorNeutralForeground1Selected)',
+	    colorNeutralForeground2: 'var(--colorNeutralForeground2)',
+	    colorNeutralForeground2Hover: 'var(--colorNeutralForeground2Hover)',
+	    colorNeutralForeground2Pressed: 'var(--colorNeutralForeground2Pressed)',
+	    colorNeutralForeground2Selected: 'var(--colorNeutralForeground2Selected)',
+	    colorNeutralForeground2BrandHover: 'var(--colorNeutralForeground2BrandHover)',
+	    colorNeutralForeground2BrandPressed: 'var(--colorNeutralForeground2BrandPressed)',
+	    colorNeutralForeground2BrandSelected: 'var(--colorNeutralForeground2BrandSelected)',
+	    colorNeutralForeground3: 'var(--colorNeutralForeground3)',
+	    colorNeutralForeground3Hover: 'var(--colorNeutralForeground3Hover)',
+	    colorNeutralForeground3Pressed: 'var(--colorNeutralForeground3Pressed)',
+	    colorNeutralForeground3Selected: 'var(--colorNeutralForeground3Selected)',
+	    colorNeutralForeground3BrandHover: 'var(--colorNeutralForeground3BrandHover)',
+	    colorNeutralForeground3BrandPressed: 'var(--colorNeutralForeground3BrandPressed)',
+	    colorNeutralForeground3BrandSelected: 'var(--colorNeutralForeground3BrandSelected)',
+	    colorNeutralForeground4: 'var(--colorNeutralForeground4)',
+	    colorNeutralForeground5: 'var(--colorNeutralForeground5)',
+	    colorNeutralForeground5Hover: 'var(--colorNeutralForeground5Hover)',
+	    colorNeutralForeground5Pressed: 'var(--colorNeutralForeground5Pressed)',
+	    colorNeutralForeground5Selected: 'var(--colorNeutralForeground5Selected)',
+	    colorNeutralForegroundDisabled: 'var(--colorNeutralForegroundDisabled)',
+	    colorBrandForegroundLink: 'var(--colorBrandForegroundLink)',
+	    colorBrandForegroundLinkHover: 'var(--colorBrandForegroundLinkHover)',
+	    colorBrandForegroundLinkPressed: 'var(--colorBrandForegroundLinkPressed)',
+	    colorBrandForegroundLinkSelected: 'var(--colorBrandForegroundLinkSelected)',
+	    colorNeutralForeground2Link: 'var(--colorNeutralForeground2Link)',
+	    colorNeutralForeground2LinkHover: 'var(--colorNeutralForeground2LinkHover)',
+	    colorNeutralForeground2LinkPressed: 'var(--colorNeutralForeground2LinkPressed)',
+	    colorNeutralForeground2LinkSelected: 'var(--colorNeutralForeground2LinkSelected)',
+	    colorCompoundBrandForeground1: 'var(--colorCompoundBrandForeground1)',
+	    colorCompoundBrandForeground1Hover: 'var(--colorCompoundBrandForeground1Hover)',
+	    colorCompoundBrandForeground1Pressed: 'var(--colorCompoundBrandForeground1Pressed)',
+	    colorNeutralForegroundOnBrand: 'var(--colorNeutralForegroundOnBrand)',
+	    colorNeutralForegroundInverted: 'var(--colorNeutralForegroundInverted)',
+	    colorNeutralForegroundInvertedHover: 'var(--colorNeutralForegroundInvertedHover)',
+	    colorNeutralForegroundInvertedPressed: 'var(--colorNeutralForegroundInvertedPressed)',
+	    colorNeutralForegroundInvertedSelected: 'var(--colorNeutralForegroundInvertedSelected)',
+	    colorNeutralForegroundInverted2: 'var(--colorNeutralForegroundInverted2)',
+	    colorNeutralForegroundStaticInverted: 'var(--colorNeutralForegroundStaticInverted)',
+	    colorNeutralForegroundInvertedLink: 'var(--colorNeutralForegroundInvertedLink)',
+	    colorNeutralForegroundInvertedLinkHover: 'var(--colorNeutralForegroundInvertedLinkHover)',
+	    colorNeutralForegroundInvertedLinkPressed: 'var(--colorNeutralForegroundInvertedLinkPressed)',
+	    colorNeutralForegroundInvertedLinkSelected: 'var(--colorNeutralForegroundInvertedLinkSelected)',
+	    colorNeutralForegroundInvertedDisabled: 'var(--colorNeutralForegroundInvertedDisabled)',
+	    colorBrandForeground1: 'var(--colorBrandForeground1)',
+	    colorBrandForeground2: 'var(--colorBrandForeground2)',
+	    colorBrandForeground2Hover: 'var(--colorBrandForeground2Hover)',
+	    colorBrandForeground2Pressed: 'var(--colorBrandForeground2Pressed)',
+	    colorNeutralForeground1Static: 'var(--colorNeutralForeground1Static)',
+	    colorBrandForegroundInverted: 'var(--colorBrandForegroundInverted)',
+	    colorBrandForegroundInvertedHover: 'var(--colorBrandForegroundInvertedHover)',
+	    colorBrandForegroundInvertedPressed: 'var(--colorBrandForegroundInvertedPressed)',
+	    colorBrandForegroundOnLight: 'var(--colorBrandForegroundOnLight)',
+	    colorBrandForegroundOnLightHover: 'var(--colorBrandForegroundOnLightHover)',
+	    colorBrandForegroundOnLightPressed: 'var(--colorBrandForegroundOnLightPressed)',
+	    colorBrandForegroundOnLightSelected: 'var(--colorBrandForegroundOnLightSelected)',
+	    colorNeutralBackground1: 'var(--colorNeutralBackground1)',
+	    colorNeutralBackground1Hover: 'var(--colorNeutralBackground1Hover)',
+	    colorNeutralBackground1Pressed: 'var(--colorNeutralBackground1Pressed)',
+	    colorNeutralBackground1Selected: 'var(--colorNeutralBackground1Selected)',
+	    colorNeutralBackground2: 'var(--colorNeutralBackground2)',
+	    colorNeutralBackground2Hover: 'var(--colorNeutralBackground2Hover)',
+	    colorNeutralBackground2Pressed: 'var(--colorNeutralBackground2Pressed)',
+	    colorNeutralBackground2Selected: 'var(--colorNeutralBackground2Selected)',
+	    colorNeutralBackground3: 'var(--colorNeutralBackground3)',
+	    colorNeutralBackground3Hover: 'var(--colorNeutralBackground3Hover)',
+	    colorNeutralBackground3Pressed: 'var(--colorNeutralBackground3Pressed)',
+	    colorNeutralBackground3Selected: 'var(--colorNeutralBackground3Selected)',
+	    colorNeutralBackground4: 'var(--colorNeutralBackground4)',
+	    colorNeutralBackground4Hover: 'var(--colorNeutralBackground4Hover)',
+	    colorNeutralBackground4Pressed: 'var(--colorNeutralBackground4Pressed)',
+	    colorNeutralBackground4Selected: 'var(--colorNeutralBackground4Selected)',
+	    colorNeutralBackground5: 'var(--colorNeutralBackground5)',
+	    colorNeutralBackground5Hover: 'var(--colorNeutralBackground5Hover)',
+	    colorNeutralBackground5Pressed: 'var(--colorNeutralBackground5Pressed)',
+	    colorNeutralBackground5Selected: 'var(--colorNeutralBackground5Selected)',
+	    colorNeutralBackground6: 'var(--colorNeutralBackground6)',
+	    colorNeutralBackground7: 'var(--colorNeutralBackground7)',
+	    colorNeutralBackground7Hover: 'var(--colorNeutralBackground7Hover)',
+	    colorNeutralBackground7Pressed: 'var(--colorNeutralBackground7Pressed)',
+	    colorNeutralBackground7Selected: 'var(--colorNeutralBackground7Selected)',
+	    colorNeutralBackground8: 'var(--colorNeutralBackground8)',
+	    colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)',
+	    colorNeutralBackgroundInvertedHover: 'var(--colorNeutralBackgroundInvertedHover)',
+	    colorNeutralBackgroundInvertedPressed: 'var(--colorNeutralBackgroundInvertedPressed)',
+	    colorNeutralBackgroundInvertedSelected: 'var(--colorNeutralBackgroundInvertedSelected)',
+	    colorNeutralBackgroundStatic: 'var(--colorNeutralBackgroundStatic)',
+	    colorNeutralBackgroundAlpha: 'var(--colorNeutralBackgroundAlpha)',
+	    colorNeutralBackgroundAlpha2: 'var(--colorNeutralBackgroundAlpha2)',
+	    colorSubtleBackground: 'var(--colorSubtleBackground)',
+	    colorSubtleBackgroundHover: 'var(--colorSubtleBackgroundHover)',
+	    colorSubtleBackgroundPressed: 'var(--colorSubtleBackgroundPressed)',
+	    colorSubtleBackgroundSelected: 'var(--colorSubtleBackgroundSelected)',
+	    colorSubtleBackgroundLightAlphaHover: 'var(--colorSubtleBackgroundLightAlphaHover)',
+	    colorSubtleBackgroundLightAlphaPressed: 'var(--colorSubtleBackgroundLightAlphaPressed)',
+	    colorSubtleBackgroundLightAlphaSelected: 'var(--colorSubtleBackgroundLightAlphaSelected)',
+	    colorSubtleBackgroundInverted: 'var(--colorSubtleBackgroundInverted)',
+	    colorSubtleBackgroundInvertedHover: 'var(--colorSubtleBackgroundInvertedHover)',
+	    colorSubtleBackgroundInvertedPressed: 'var(--colorSubtleBackgroundInvertedPressed)',
+	    colorSubtleBackgroundInvertedSelected: 'var(--colorSubtleBackgroundInvertedSelected)',
+	    colorTransparentBackground: 'var(--colorTransparentBackground)',
+	    colorTransparentBackgroundHover: 'var(--colorTransparentBackgroundHover)',
+	    colorTransparentBackgroundPressed: 'var(--colorTransparentBackgroundPressed)',
+	    colorTransparentBackgroundSelected: 'var(--colorTransparentBackgroundSelected)',
+	    colorNeutralBackgroundDisabled: 'var(--colorNeutralBackgroundDisabled)',
+	    colorNeutralBackgroundDisabled2: 'var(--colorNeutralBackgroundDisabled2)',
+	    colorNeutralBackgroundInvertedDisabled: 'var(--colorNeutralBackgroundInvertedDisabled)',
+	    colorNeutralStencil1: 'var(--colorNeutralStencil1)',
+	    colorNeutralStencil2: 'var(--colorNeutralStencil2)',
+	    colorNeutralStencil1Alpha: 'var(--colorNeutralStencil1Alpha)',
+	    colorNeutralStencil2Alpha: 'var(--colorNeutralStencil2Alpha)',
+	    colorBackgroundOverlay: 'var(--colorBackgroundOverlay)',
+	    colorScrollbarOverlay: 'var(--colorScrollbarOverlay)',
+	    colorBrandBackground: 'var(--colorBrandBackground)',
+	    colorBrandBackgroundHover: 'var(--colorBrandBackgroundHover)',
+	    colorBrandBackgroundPressed: 'var(--colorBrandBackgroundPressed)',
+	    colorBrandBackgroundSelected: 'var(--colorBrandBackgroundSelected)',
+	    colorCompoundBrandBackground: 'var(--colorCompoundBrandBackground)',
+	    colorCompoundBrandBackgroundHover: 'var(--colorCompoundBrandBackgroundHover)',
+	    colorCompoundBrandBackgroundPressed: 'var(--colorCompoundBrandBackgroundPressed)',
+	    colorBrandBackgroundStatic: 'var(--colorBrandBackgroundStatic)',
+	    colorBrandBackground2: 'var(--colorBrandBackground2)',
+	    colorBrandBackground2Hover: 'var(--colorBrandBackground2Hover)',
+	    colorBrandBackground2Pressed: 'var(--colorBrandBackground2Pressed)',
+	    colorBrandBackground3Static: 'var(--colorBrandBackground3Static)',
+	    colorBrandBackground4Static: 'var(--colorBrandBackground4Static)',
+	    colorBrandBackgroundInverted: 'var(--colorBrandBackgroundInverted)',
+	    colorBrandBackgroundInvertedHover: 'var(--colorBrandBackgroundInvertedHover)',
+	    colorBrandBackgroundInvertedPressed: 'var(--colorBrandBackgroundInvertedPressed)',
+	    colorBrandBackgroundInvertedSelected: 'var(--colorBrandBackgroundInvertedSelected)',
+	    colorNeutralCardBackground: 'var(--colorNeutralCardBackground)',
+	    colorNeutralCardBackgroundHover: 'var(--colorNeutralCardBackgroundHover)',
+	    colorNeutralCardBackgroundPressed: 'var(--colorNeutralCardBackgroundPressed)',
+	    colorNeutralCardBackgroundSelected: 'var(--colorNeutralCardBackgroundSelected)',
+	    colorNeutralCardBackgroundDisabled: 'var(--colorNeutralCardBackgroundDisabled)',
+	    colorNeutralStrokeAccessible: 'var(--colorNeutralStrokeAccessible)',
+	    colorNeutralStrokeAccessibleHover: 'var(--colorNeutralStrokeAccessibleHover)',
+	    colorNeutralStrokeAccessiblePressed: 'var(--colorNeutralStrokeAccessiblePressed)',
+	    colorNeutralStrokeAccessibleSelected: 'var(--colorNeutralStrokeAccessibleSelected)',
+	    colorNeutralStroke1: 'var(--colorNeutralStroke1)',
+	    colorNeutralStroke1Hover: 'var(--colorNeutralStroke1Hover)',
+	    colorNeutralStroke1Pressed: 'var(--colorNeutralStroke1Pressed)',
+	    colorNeutralStroke1Selected: 'var(--colorNeutralStroke1Selected)',
+	    colorNeutralStroke2: 'var(--colorNeutralStroke2)',
+	    colorNeutralStroke3: 'var(--colorNeutralStroke3)',
+	    colorNeutralStroke4: 'var(--colorNeutralStroke4)',
+	    colorNeutralStroke4Hover: 'var(--colorNeutralStroke4Hover)',
+	    colorNeutralStroke4Pressed: 'var(--colorNeutralStroke4Pressed)',
+	    colorNeutralStroke4Selected: 'var(--colorNeutralStroke4Selected)',
+	    colorNeutralStrokeSubtle: 'var(--colorNeutralStrokeSubtle)',
+	    colorNeutralStrokeOnBrand: 'var(--colorNeutralStrokeOnBrand)',
+	    colorNeutralStrokeOnBrand2: 'var(--colorNeutralStrokeOnBrand2)',
+	    colorNeutralStrokeOnBrand2Hover: 'var(--colorNeutralStrokeOnBrand2Hover)',
+	    colorNeutralStrokeOnBrand2Pressed: 'var(--colorNeutralStrokeOnBrand2Pressed)',
+	    colorNeutralStrokeOnBrand2Selected: 'var(--colorNeutralStrokeOnBrand2Selected)',
+	    colorBrandStroke1: 'var(--colorBrandStroke1)',
+	    colorBrandStroke2: 'var(--colorBrandStroke2)',
+	    colorBrandStroke2Hover: 'var(--colorBrandStroke2Hover)',
+	    colorBrandStroke2Pressed: 'var(--colorBrandStroke2Pressed)',
+	    colorBrandStroke2Contrast: 'var(--colorBrandStroke2Contrast)',
+	    colorCompoundBrandStroke: 'var(--colorCompoundBrandStroke)',
+	    colorCompoundBrandStrokeHover: 'var(--colorCompoundBrandStrokeHover)',
+	    colorCompoundBrandStrokePressed: 'var(--colorCompoundBrandStrokePressed)',
+	    colorNeutralStrokeDisabled: 'var(--colorNeutralStrokeDisabled)',
+	    colorNeutralStrokeDisabled2: 'var(--colorNeutralStrokeDisabled2)',
+	    colorNeutralStrokeInvertedDisabled: 'var(--colorNeutralStrokeInvertedDisabled)',
+	    colorTransparentStroke: 'var(--colorTransparentStroke)',
+	    colorTransparentStrokeInteractive: 'var(--colorTransparentStrokeInteractive)',
+	    colorTransparentStrokeDisabled: 'var(--colorTransparentStrokeDisabled)',
+	    colorNeutralStrokeAlpha: 'var(--colorNeutralStrokeAlpha)',
+	    colorNeutralStrokeAlpha2: 'var(--colorNeutralStrokeAlpha2)',
+	    colorStrokeFocus1: 'var(--colorStrokeFocus1)',
+	    colorStrokeFocus2: 'var(--colorStrokeFocus2)',
+	    colorNeutralShadowAmbient: 'var(--colorNeutralShadowAmbient)',
+	    colorNeutralShadowKey: 'var(--colorNeutralShadowKey)',
+	    colorNeutralShadowAmbientLighter: 'var(--colorNeutralShadowAmbientLighter)',
+	    colorNeutralShadowKeyLighter: 'var(--colorNeutralShadowKeyLighter)',
+	    colorNeutralShadowAmbientDarker: 'var(--colorNeutralShadowAmbientDarker)',
+	    colorNeutralShadowKeyDarker: 'var(--colorNeutralShadowKeyDarker)',
+	    colorBrandShadowAmbient: 'var(--colorBrandShadowAmbient)',
+	    colorBrandShadowKey: 'var(--colorBrandShadowKey)',
+	    // Color palette tokens
+	    // Color palette red tokens
+	    colorPaletteRedBackground1: 'var(--colorPaletteRedBackground1)',
+	    colorPaletteRedBackground2: 'var(--colorPaletteRedBackground2)',
+	    colorPaletteRedBackground3: 'var(--colorPaletteRedBackground3)',
+	    colorPaletteRedBorderActive: 'var(--colorPaletteRedBorderActive)',
+	    colorPaletteRedBorder1: 'var(--colorPaletteRedBorder1)',
+	    colorPaletteRedBorder2: 'var(--colorPaletteRedBorder2)',
+	    colorPaletteRedForeground1: 'var(--colorPaletteRedForeground1)',
+	    colorPaletteRedForeground2: 'var(--colorPaletteRedForeground2)',
+	    colorPaletteRedForeground3: 'var(--colorPaletteRedForeground3)',
+	    colorPaletteRedForegroundInverted: 'var(--colorPaletteRedForegroundInverted)',
+	    // Color palette green tokens
+	    colorPaletteGreenBackground1: 'var(--colorPaletteGreenBackground1)',
+	    colorPaletteGreenBackground2: 'var(--colorPaletteGreenBackground2)',
+	    colorPaletteGreenBackground3: 'var(--colorPaletteGreenBackground3)',
+	    colorPaletteGreenBorderActive: 'var(--colorPaletteGreenBorderActive)',
+	    colorPaletteGreenBorder1: 'var(--colorPaletteGreenBorder1)',
+	    colorPaletteGreenBorder2: 'var(--colorPaletteGreenBorder2)',
+	    colorPaletteGreenForeground1: 'var(--colorPaletteGreenForeground1)',
+	    colorPaletteGreenForeground2: 'var(--colorPaletteGreenForeground2)',
+	    colorPaletteGreenForeground3: 'var(--colorPaletteGreenForeground3)',
+	    colorPaletteGreenForegroundInverted: 'var(--colorPaletteGreenForegroundInverted)',
+	    // Color palette dark orange tokens
+	    colorPaletteDarkOrangeBackground1: 'var(--colorPaletteDarkOrangeBackground1)',
+	    colorPaletteDarkOrangeBackground2: 'var(--colorPaletteDarkOrangeBackground2)',
+	    colorPaletteDarkOrangeBackground3: 'var(--colorPaletteDarkOrangeBackground3)',
+	    colorPaletteDarkOrangeBorderActive: 'var(--colorPaletteDarkOrangeBorderActive)',
+	    colorPaletteDarkOrangeBorder1: 'var(--colorPaletteDarkOrangeBorder1)',
+	    colorPaletteDarkOrangeBorder2: 'var(--colorPaletteDarkOrangeBorder2)',
+	    colorPaletteDarkOrangeForeground1: 'var(--colorPaletteDarkOrangeForeground1)',
+	    colorPaletteDarkOrangeForeground2: 'var(--colorPaletteDarkOrangeForeground2)',
+	    colorPaletteDarkOrangeForeground3: 'var(--colorPaletteDarkOrangeForeground3)',
+	    // Color palette yellow tokens
+	    colorPaletteYellowBackground1: 'var(--colorPaletteYellowBackground1)',
+	    colorPaletteYellowBackground2: 'var(--colorPaletteYellowBackground2)',
+	    colorPaletteYellowBackground3: 'var(--colorPaletteYellowBackground3)',
+	    colorPaletteYellowBorderActive: 'var(--colorPaletteYellowBorderActive)',
+	    colorPaletteYellowBorder1: 'var(--colorPaletteYellowBorder1)',
+	    colorPaletteYellowBorder2: 'var(--colorPaletteYellowBorder2)',
+	    colorPaletteYellowForeground1: 'var(--colorPaletteYellowForeground1)',
+	    colorPaletteYellowForeground2: 'var(--colorPaletteYellowForeground2)',
+	    colorPaletteYellowForeground3: 'var(--colorPaletteYellowForeground3)',
+	    colorPaletteYellowForegroundInverted: 'var(--colorPaletteYellowForegroundInverted)',
+	    // Color palette berry tokens
+	    colorPaletteBerryBackground1: 'var(--colorPaletteBerryBackground1)',
+	    colorPaletteBerryBackground2: 'var(--colorPaletteBerryBackground2)',
+	    colorPaletteBerryBackground3: 'var(--colorPaletteBerryBackground3)',
+	    colorPaletteBerryBorderActive: 'var(--colorPaletteBerryBorderActive)',
+	    colorPaletteBerryBorder1: 'var(--colorPaletteBerryBorder1)',
+	    colorPaletteBerryBorder2: 'var(--colorPaletteBerryBorder2)',
+	    colorPaletteBerryForeground1: 'var(--colorPaletteBerryForeground1)',
+	    colorPaletteBerryForeground2: 'var(--colorPaletteBerryForeground2)',
+	    colorPaletteBerryForeground3: 'var(--colorPaletteBerryForeground3)',
+	    // Color palette marigold tokens
+	    colorPaletteMarigoldBackground1: 'var(--colorPaletteMarigoldBackground1)',
+	    colorPaletteMarigoldBackground2: 'var(--colorPaletteMarigoldBackground2)',
+	    colorPaletteMarigoldBackground3: 'var(--colorPaletteMarigoldBackground3)',
+	    colorPaletteMarigoldBorderActive: 'var(--colorPaletteMarigoldBorderActive)',
+	    colorPaletteMarigoldBorder1: 'var(--colorPaletteMarigoldBorder1)',
+	    colorPaletteMarigoldBorder2: 'var(--colorPaletteMarigoldBorder2)',
+	    colorPaletteMarigoldForeground1: 'var(--colorPaletteMarigoldForeground1)',
+	    colorPaletteMarigoldForeground2: 'var(--colorPaletteMarigoldForeground2)',
+	    colorPaletteMarigoldForeground3: 'var(--colorPaletteMarigoldForeground3)',
+	    // Color palette light green tokens
+	    colorPaletteLightGreenBackground1: 'var(--colorPaletteLightGreenBackground1)',
+	    colorPaletteLightGreenBackground2: 'var(--colorPaletteLightGreenBackground2)',
+	    colorPaletteLightGreenBackground3: 'var(--colorPaletteLightGreenBackground3)',
+	    colorPaletteLightGreenBorderActive: 'var(--colorPaletteLightGreenBorderActive)',
+	    colorPaletteLightGreenBorder1: 'var(--colorPaletteLightGreenBorder1)',
+	    colorPaletteLightGreenBorder2: 'var(--colorPaletteLightGreenBorder2)',
+	    colorPaletteLightGreenForeground1: 'var(--colorPaletteLightGreenForeground1)',
+	    colorPaletteLightGreenForeground2: 'var(--colorPaletteLightGreenForeground2)',
+	    colorPaletteLightGreenForeground3: 'var(--colorPaletteLightGreenForeground3)',
+	    // Color palette anchor tokens
+	    colorPaletteAnchorBackground2: 'var(--colorPaletteAnchorBackground2)',
+	    colorPaletteAnchorBorderActive: 'var(--colorPaletteAnchorBorderActive)',
+	    colorPaletteAnchorForeground2: 'var(--colorPaletteAnchorForeground2)',
+	    // Color palette beige tokens
+	    colorPaletteBeigeBackground2: 'var(--colorPaletteBeigeBackground2)',
+	    colorPaletteBeigeBorderActive: 'var(--colorPaletteBeigeBorderActive)',
+	    colorPaletteBeigeForeground2: 'var(--colorPaletteBeigeForeground2)',
+	    // Color palette blue tokens
+	    colorPaletteBlueBackground2: 'var(--colorPaletteBlueBackground2)',
+	    colorPaletteBlueBorderActive: 'var(--colorPaletteBlueBorderActive)',
+	    colorPaletteBlueForeground2: 'var(--colorPaletteBlueForeground2)',
+	    // Color palette brass tokens
+	    colorPaletteBrassBackground2: 'var(--colorPaletteBrassBackground2)',
+	    colorPaletteBrassBorderActive: 'var(--colorPaletteBrassBorderActive)',
+	    colorPaletteBrassForeground2: 'var(--colorPaletteBrassForeground2)',
+	    // Color palette brown tokens
+	    colorPaletteBrownBackground2: 'var(--colorPaletteBrownBackground2)',
+	    colorPaletteBrownBorderActive: 'var(--colorPaletteBrownBorderActive)',
+	    colorPaletteBrownForeground2: 'var(--colorPaletteBrownForeground2)',
+	    // Color palette cornflower tokens
+	    colorPaletteCornflowerBackground2: 'var(--colorPaletteCornflowerBackground2)',
+	    colorPaletteCornflowerBorderActive: 'var(--colorPaletteCornflowerBorderActive)',
+	    colorPaletteCornflowerForeground2: 'var(--colorPaletteCornflowerForeground2)',
+	    // Color palette cranberry tokens
+	    colorPaletteCranberryBackground2: 'var(--colorPaletteCranberryBackground2)',
+	    colorPaletteCranberryBorderActive: 'var(--colorPaletteCranberryBorderActive)',
+	    colorPaletteCranberryForeground2: 'var(--colorPaletteCranberryForeground2)',
+	    // Color palette dark green tokens
+	    colorPaletteDarkGreenBackground2: 'var(--colorPaletteDarkGreenBackground2)',
+	    colorPaletteDarkGreenBorderActive: 'var(--colorPaletteDarkGreenBorderActive)',
+	    colorPaletteDarkGreenForeground2: 'var(--colorPaletteDarkGreenForeground2)',
+	    // Color palette dark red tokens
+	    colorPaletteDarkRedBackground2: 'var(--colorPaletteDarkRedBackground2)',
+	    colorPaletteDarkRedBorderActive: 'var(--colorPaletteDarkRedBorderActive)',
+	    colorPaletteDarkRedForeground2: 'var(--colorPaletteDarkRedForeground2)',
+	    // Color palette forest tokens
+	    colorPaletteForestBackground2: 'var(--colorPaletteForestBackground2)',
+	    colorPaletteForestBorderActive: 'var(--colorPaletteForestBorderActive)',
+	    colorPaletteForestForeground2: 'var(--colorPaletteForestForeground2)',
+	    // Color palette gold tokens
+	    colorPaletteGoldBackground2: 'var(--colorPaletteGoldBackground2)',
+	    colorPaletteGoldBorderActive: 'var(--colorPaletteGoldBorderActive)',
+	    colorPaletteGoldForeground2: 'var(--colorPaletteGoldForeground2)',
+	    // Color palette grape tokens
+	    colorPaletteGrapeBackground2: 'var(--colorPaletteGrapeBackground2)',
+	    colorPaletteGrapeBorderActive: 'var(--colorPaletteGrapeBorderActive)',
+	    colorPaletteGrapeForeground2: 'var(--colorPaletteGrapeForeground2)',
+	    // Color palette lavender tokens
+	    colorPaletteLavenderBackground2: 'var(--colorPaletteLavenderBackground2)',
+	    colorPaletteLavenderBorderActive: 'var(--colorPaletteLavenderBorderActive)',
+	    colorPaletteLavenderForeground2: 'var(--colorPaletteLavenderForeground2)',
+	    // Color palette light teal tokens
+	    colorPaletteLightTealBackground2: 'var(--colorPaletteLightTealBackground2)',
+	    colorPaletteLightTealBorderActive: 'var(--colorPaletteLightTealBorderActive)',
+	    colorPaletteLightTealForeground2: 'var(--colorPaletteLightTealForeground2)',
+	    // Color palette lilac tokens
+	    colorPaletteLilacBackground2: 'var(--colorPaletteLilacBackground2)',
+	    colorPaletteLilacBorderActive: 'var(--colorPaletteLilacBorderActive)',
+	    colorPaletteLilacForeground2: 'var(--colorPaletteLilacForeground2)',
+	    // Color palette magenta tokens
+	    colorPaletteMagentaBackground2: 'var(--colorPaletteMagentaBackground2)',
+	    colorPaletteMagentaBorderActive: 'var(--colorPaletteMagentaBorderActive)',
+	    colorPaletteMagentaForeground2: 'var(--colorPaletteMagentaForeground2)',
+	    // Color palette mink tokens
+	    colorPaletteMinkBackground2: 'var(--colorPaletteMinkBackground2)',
+	    colorPaletteMinkBorderActive: 'var(--colorPaletteMinkBorderActive)',
+	    colorPaletteMinkForeground2: 'var(--colorPaletteMinkForeground2)',
+	    // Color palette navy tokens
+	    colorPaletteNavyBackground2: 'var(--colorPaletteNavyBackground2)',
+	    colorPaletteNavyBorderActive: 'var(--colorPaletteNavyBorderActive)',
+	    colorPaletteNavyForeground2: 'var(--colorPaletteNavyForeground2)',
+	    // Color palette peach tokens
+	    colorPalettePeachBackground2: 'var(--colorPalettePeachBackground2)',
+	    colorPalettePeachBorderActive: 'var(--colorPalettePeachBorderActive)',
+	    colorPalettePeachForeground2: 'var(--colorPalettePeachForeground2)',
+	    // Color palette pink tokens
+	    colorPalettePinkBackground2: 'var(--colorPalettePinkBackground2)',
+	    colorPalettePinkBorderActive: 'var(--colorPalettePinkBorderActive)',
+	    colorPalettePinkForeground2: 'var(--colorPalettePinkForeground2)',
+	    // Color palette platinum tokens
+	    colorPalettePlatinumBackground2: 'var(--colorPalettePlatinumBackground2)',
+	    colorPalettePlatinumBorderActive: 'var(--colorPalettePlatinumBorderActive)',
+	    colorPalettePlatinumForeground2: 'var(--colorPalettePlatinumForeground2)',
+	    // Color palette plum tokens
+	    colorPalettePlumBackground2: 'var(--colorPalettePlumBackground2)',
+	    colorPalettePlumBorderActive: 'var(--colorPalettePlumBorderActive)',
+	    colorPalettePlumForeground2: 'var(--colorPalettePlumForeground2)',
+	    // Color palette pumpkin tokens
+	    colorPalettePumpkinBackground2: 'var(--colorPalettePumpkinBackground2)',
+	    colorPalettePumpkinBorderActive: 'var(--colorPalettePumpkinBorderActive)',
+	    colorPalettePumpkinForeground2: 'var(--colorPalettePumpkinForeground2)',
+	    // Color palette purple tokens
+	    colorPalettePurpleBackground2: 'var(--colorPalettePurpleBackground2)',
+	    colorPalettePurpleBorderActive: 'var(--colorPalettePurpleBorderActive)',
+	    colorPalettePurpleForeground2: 'var(--colorPalettePurpleForeground2)',
+	    // Color palette royal blue tokens
+	    colorPaletteRoyalBlueBackground2: 'var(--colorPaletteRoyalBlueBackground2)',
+	    colorPaletteRoyalBlueBorderActive: 'var(--colorPaletteRoyalBlueBorderActive)',
+	    colorPaletteRoyalBlueForeground2: 'var(--colorPaletteRoyalBlueForeground2)',
+	    // Color palette seafoam tokens
+	    colorPaletteSeafoamBackground2: 'var(--colorPaletteSeafoamBackground2)',
+	    colorPaletteSeafoamBorderActive: 'var(--colorPaletteSeafoamBorderActive)',
+	    colorPaletteSeafoamForeground2: 'var(--colorPaletteSeafoamForeground2)',
+	    // Color palette steel tokens
+	    colorPaletteSteelBackground2: 'var(--colorPaletteSteelBackground2)',
+	    colorPaletteSteelBorderActive: 'var(--colorPaletteSteelBorderActive)',
+	    colorPaletteSteelForeground2: 'var(--colorPaletteSteelForeground2)',
+	    // Color palette teal tokens
+	    colorPaletteTealBackground2: 'var(--colorPaletteTealBackground2)',
+	    colorPaletteTealBorderActive: 'var(--colorPaletteTealBorderActive)',
+	    colorPaletteTealForeground2: 'var(--colorPaletteTealForeground2)',
+	    // Color status success tokens
+	    colorStatusSuccessBackground1: 'var(--colorStatusSuccessBackground1)',
+	    colorStatusSuccessBackground2: 'var(--colorStatusSuccessBackground2)',
+	    colorStatusSuccessBackground3: 'var(--colorStatusSuccessBackground3)',
+	    colorStatusSuccessForeground1: 'var(--colorStatusSuccessForeground1)',
+	    colorStatusSuccessForeground2: 'var(--colorStatusSuccessForeground2)',
+	    colorStatusSuccessForeground3: 'var(--colorStatusSuccessForeground3)',
+	    colorStatusSuccessForegroundInverted: 'var(--colorStatusSuccessForegroundInverted)',
+	    colorStatusSuccessBorderActive: 'var(--colorStatusSuccessBorderActive)',
+	    colorStatusSuccessBorder1: 'var(--colorStatusSuccessBorder1)',
+	    colorStatusSuccessBorder2: 'var(--colorStatusSuccessBorder2)',
+	    // Color status warning tokens
+	    colorStatusWarningBackground1: 'var(--colorStatusWarningBackground1)',
+	    colorStatusWarningBackground2: 'var(--colorStatusWarningBackground2)',
+	    colorStatusWarningBackground3: 'var(--colorStatusWarningBackground3)',
+	    colorStatusWarningForeground1: 'var(--colorStatusWarningForeground1)',
+	    colorStatusWarningForeground2: 'var(--colorStatusWarningForeground2)',
+	    colorStatusWarningForeground3: 'var(--colorStatusWarningForeground3)',
+	    colorStatusWarningForegroundInverted: 'var(--colorStatusWarningForegroundInverted)',
+	    colorStatusWarningBorderActive: 'var(--colorStatusWarningBorderActive)',
+	    colorStatusWarningBorder1: 'var(--colorStatusWarningBorder1)',
+	    colorStatusWarningBorder2: 'var(--colorStatusWarningBorder2)',
+	    // Color status danger tokens
+	    colorStatusDangerBackground1: 'var(--colorStatusDangerBackground1)',
+	    colorStatusDangerBackground2: 'var(--colorStatusDangerBackground2)',
+	    colorStatusDangerBackground3: 'var(--colorStatusDangerBackground3)',
+	    colorStatusDangerBackground3Hover: 'var(--colorStatusDangerBackground3Hover)',
+	    colorStatusDangerBackground3Pressed: 'var(--colorStatusDangerBackground3Pressed)',
+	    colorStatusDangerForeground1: 'var(--colorStatusDangerForeground1)',
+	    colorStatusDangerForeground2: 'var(--colorStatusDangerForeground2)',
+	    colorStatusDangerForeground3: 'var(--colorStatusDangerForeground3)',
+	    colorStatusDangerForegroundInverted: 'var(--colorStatusDangerForegroundInverted)',
+	    colorStatusDangerBorderActive: 'var(--colorStatusDangerBorderActive)',
+	    colorStatusDangerBorder1: 'var(--colorStatusDangerBorder1)',
+	    colorStatusDangerBorder2: 'var(--colorStatusDangerBorder2)',
+	    // Border radius tokens
+	    borderRadiusNone: 'var(--borderRadiusNone)',
+	    borderRadiusSmall: 'var(--borderRadiusSmall)',
+	    borderRadiusMedium: 'var(--borderRadiusMedium)',
+	    borderRadiusLarge: 'var(--borderRadiusLarge)',
+	    borderRadiusXLarge: 'var(--borderRadiusXLarge)',
+	    borderRadius2XLarge: 'var(--borderRadius2XLarge)',
+	    borderRadius3XLarge: 'var(--borderRadius3XLarge)',
+	    borderRadius4XLarge: 'var(--borderRadius4XLarge)',
+	    borderRadius5XLarge: 'var(--borderRadius5XLarge)',
+	    borderRadius6XLarge: 'var(--borderRadius6XLarge)',
+	    borderRadiusCircular: 'var(--borderRadiusCircular)',
+	    // Font family tokens
+	    fontFamilyBase: 'var(--fontFamilyBase)',
+	    fontFamilyMonospace: 'var(--fontFamilyMonospace)',
+	    fontFamilyNumeric: 'var(--fontFamilyNumeric)',
+	    // Font size tokens
+	    fontSizeBase100: 'var(--fontSizeBase100)',
+	    fontSizeBase200: 'var(--fontSizeBase200)',
+	    fontSizeBase300: 'var(--fontSizeBase300)',
+	    fontSizeBase400: 'var(--fontSizeBase400)',
+	    fontSizeBase500: 'var(--fontSizeBase500)',
+	    fontSizeBase600: 'var(--fontSizeBase600)',
+	    fontSizeHero700: 'var(--fontSizeHero700)',
+	    fontSizeHero800: 'var(--fontSizeHero800)',
+	    fontSizeHero900: 'var(--fontSizeHero900)',
+	    fontSizeHero1000: 'var(--fontSizeHero1000)',
+	    // Font weight tokens
+	    fontWeightRegular: 'var(--fontWeightRegular)',
+	    fontWeightMedium: 'var(--fontWeightMedium)',
+	    fontWeightSemibold: 'var(--fontWeightSemibold)',
+	    fontWeightBold: 'var(--fontWeightBold)',
+	    // Line height tokens
+	    lineHeightBase100: 'var(--lineHeightBase100)',
+	    lineHeightBase200: 'var(--lineHeightBase200)',
+	    lineHeightBase300: 'var(--lineHeightBase300)',
+	    lineHeightBase400: 'var(--lineHeightBase400)',
+	    lineHeightBase500: 'var(--lineHeightBase500)',
+	    lineHeightBase600: 'var(--lineHeightBase600)',
+	    lineHeightHero700: 'var(--lineHeightHero700)',
+	    lineHeightHero800: 'var(--lineHeightHero800)',
+	    lineHeightHero900: 'var(--lineHeightHero900)',
+	    lineHeightHero1000: 'var(--lineHeightHero1000)',
+	    // Shadow tokens
+	    shadow2: 'var(--shadow2)',
+	    shadow4: 'var(--shadow4)',
+	    shadow8: 'var(--shadow8)',
+	    shadow16: 'var(--shadow16)',
+	    shadow28: 'var(--shadow28)',
+	    shadow64: 'var(--shadow64)',
+	    // Shadow brand tokens
+	    shadow2Brand: 'var(--shadow2Brand)',
+	    shadow4Brand: 'var(--shadow4Brand)',
+	    shadow8Brand: 'var(--shadow8Brand)',
+	    shadow16Brand: 'var(--shadow16Brand)',
+	    shadow28Brand: 'var(--shadow28Brand)',
+	    shadow64Brand: 'var(--shadow64Brand)',
+	    // Stroke width tokens
+	    strokeWidthThin: 'var(--strokeWidthThin)',
+	    strokeWidthThick: 'var(--strokeWidthThick)',
+	    strokeWidthThicker: 'var(--strokeWidthThicker)',
+	    strokeWidthThickest: 'var(--strokeWidthThickest)',
+	    // Spacings
+	    spacingHorizontalNone: 'var(--spacingHorizontalNone)',
+	    spacingHorizontalXXS: 'var(--spacingHorizontalXXS)',
+	    spacingHorizontalXS: 'var(--spacingHorizontalXS)',
+	    spacingHorizontalSNudge: 'var(--spacingHorizontalSNudge)',
+	    spacingHorizontalS: 'var(--spacingHorizontalS)',
+	    spacingHorizontalMNudge: 'var(--spacingHorizontalMNudge)',
+	    spacingHorizontalM: 'var(--spacingHorizontalM)',
+	    spacingHorizontalL: 'var(--spacingHorizontalL)',
+	    spacingHorizontalXL: 'var(--spacingHorizontalXL)',
+	    spacingHorizontalXXL: 'var(--spacingHorizontalXXL)',
+	    spacingHorizontalXXXL: 'var(--spacingHorizontalXXXL)',
+	    spacingVerticalNone: 'var(--spacingVerticalNone)',
+	    spacingVerticalXXS: 'var(--spacingVerticalXXS)',
+	    spacingVerticalXS: 'var(--spacingVerticalXS)',
+	    spacingVerticalSNudge: 'var(--spacingVerticalSNudge)',
+	    spacingVerticalS: 'var(--spacingVerticalS)',
+	    spacingVerticalMNudge: 'var(--spacingVerticalMNudge)',
+	    spacingVerticalM: 'var(--spacingVerticalM)',
+	    spacingVerticalL: 'var(--spacingVerticalL)',
+	    spacingVerticalXL: 'var(--spacingVerticalXL)',
+	    spacingVerticalXXL: 'var(--spacingVerticalXXL)',
+	    spacingVerticalXXXL: 'var(--spacingVerticalXXXL)',
+	    // Durations
+	    durationUltraFast: 'var(--durationUltraFast)',
+	    durationFaster: 'var(--durationFaster)',
+	    durationFast: 'var(--durationFast)',
+	    durationNormal: 'var(--durationNormal)',
+	    durationGentle: 'var(--durationGentle)',
+	    durationSlow: 'var(--durationSlow)',
+	    durationSlower: 'var(--durationSlower)',
+	    durationUltraSlow: 'var(--durationUltraSlow)',
+	    // Curves
+	    curveAccelerateMax: 'var(--curveAccelerateMax)',
+	    curveAccelerateMid: 'var(--curveAccelerateMid)',
+	    curveAccelerateMin: 'var(--curveAccelerateMin)',
+	    curveDecelerateMax: 'var(--curveDecelerateMax)',
+	    curveDecelerateMid: 'var(--curveDecelerateMid)',
+	    curveDecelerateMin: 'var(--curveDecelerateMin)',
+	    curveEasyEaseMax: 'var(--curveEasyEaseMax)',
+	    curveEasyEase: 'var(--curveEasyEase)',
+	    curveLinear: 'var(--curveLinear)',
+	    /**
+	   * ZIndexes
+	   * Special case where the tokens contain default values
+	   * ZIndexes are not mandatory, so they are not included in the theme, but can be used as tokens with default values
+	   */ /**
+	   * Elevation 0
+	   * Can be used for background elements, like surfaces
+	   */ zIndexBackground: 'var(--zIndexBackground, 0)',
+	    /**
+	   * Elevation 2
+	   * Can be used content that is on top of the background, like cards
+	   */ zIndexContent: 'var(--zIndexContent, 1)',
+	    /**
+	   * Elevation 4
+	   * Can be used for overlays, like the backdrop of a modal
+	   */ zIndexOverlay: 'var(--zIndexOverlay, 1000)',
+	    /**
+	   * Elevation 8
+	   * Can be used for popups, like modals and drawers
+	   */ zIndexPopup: 'var(--zIndexPopup, 2000)',
+	    /**
+	   * Elevation 16
+	   * Can be used for messages, like snackbars and toasts
+	   */ zIndexMessages: 'var(--zIndexMessages, 3000)',
+	    /**
+	   * Elevation 28
+	   * Can be used for floating elements, like dropdowns
+	   */ zIndexFloating: 'var(--zIndexFloating, 4000)',
+	    /**
+	   * Elevation 64
+	   * Can be used for high priority floating elements, like tooltips
+	   */ zIndexPriority: 'var(--zIndexPriority, 5000)',
+	    /**
+	   * Special elevation
+	   * Can be used for elements that need to be above everything else, like debug overlays
+	   */ zIndexDebug: 'var(--zIndexDebug, 6000)'
+	};
+
 	function createShadowTokens(ambientColor, keyColor, tokenSuffix = '') {
 	    return {
 	        [`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,
@@ -45613,24 +46162,72 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	 * `primaryColor`/`fonts` props. The library is embedded in pages we don't control, so the provider
 	 * lives here rather than relying on a host one. `display: contents` keeps it out of the layout.
 	 */
-	const FormThemeProvider = ({ primaryColor, fonts, children }) => {
+	const FormThemeProvider = ({ primaryColor, fonts, dir = "ltr", children }) => {
 	    const fontFamily = fonts?.family;
 	    const theme = reactExports.useMemo(() => createFormTheme(primaryColor, { family: fontFamily }), [primaryColor, fontFamily]);
-	    return (React.createElement(FluentProvider, { theme: theme, style: { display: "contents" } }, children));
+	    return (React.createElement(FluentProvider, { theme: theme, dir: dir, style: { display: "contents" } }, children));
 	};
 
+	/**
+	 * Deep merge utility
+	 */
+	/**
+	 * Check if current language is RTL
+	 */
+	function isRTLContent(languageCode) {
+	    const rtlLanguages = ['ar', 'he'];
+	    if (languageCode) {
+	        return rtlLanguages.includes(languageCode.toLowerCase());
+	    }
+	    // Try to detect from document or i18n
+	    return false;
+	}
+
+	const INVALID = "[aria-invalid='true']";
 	/**
 	 * v9 replacements for the v8 `textFieldStyles` / `dropdownStyles` / `comboboxStyles` objects
 	 * (`defaultStyles.ts`). The font family now comes from the `FluentProvider` theme
 	 * (`createFormTheme`), so only the box styling lives here.
 	 */
 	const useFieldStyles = makeStyles({
-	    // v8 `fieldGroup`: grey fill, 1px #DDD border, 5px radius, 50px high.
+	    // Mirrors SharedPortal's `inputRoot` (`form-screen.styles.ts`): a near-white fill with a #8A8A8A edge
+	    // (over 3:1, WCAG's minimum for a control's boundary), 5px radius, 50px high. The old #F5F5F5 fill
+	    // and #DDDDDD edge read as disabled, so that look is kept for real disabled fields only.
 	    input: {
-	        backgroundColor: "#F5F5F5",
-	        ...shorthands.border("1px", "solid", "#DDDDDD"),
+	        backgroundColor: "#FCFCFF",
+	        ...shorthands.border("1px", "solid", "#8A8A8A"),
 	        ...shorthands.borderRadius("5px"),
 	        height: "50px",
+	        transitionProperty: "border-color, background-color",
+	        transitionDuration: "0.15s",
+	        // Text and placeholder at 16px. The `<input>` and the Dropdown's button carry v9's own 14px
+	        // class, which a font size on the root does not reach.
+	        "& input, & .fui-Dropdown__button": {
+	            fontSize: "16px",
+	        },
+	        // The field being typed in turns white, so it stands out from the rest.
+	        ":focus-within": {
+	            backgroundColor: "#fff",
+	        },
+	        // Hover and focus are skipped on an invalid field, so its red edge always shows. `aria-invalid`
+	        // is what Field puts on the control when its `validationState` is "error": on the input, or
+	        // on the button for Dropdown. Hover also skips the focused field: Griffel emits `:hover` rules
+	        // after `:focus-within` ones, so the brand edge would otherwise turn grey under the pointer.
+	        [`:hover:not(:focus-within):not(${INVALID}):not(:has(${INVALID})):not(:has(:disabled))`]: {
+	            ...shorthands.borderColor("#424242"),
+	        },
+	        [`:focus-within:not(${INVALID}):not(:has(${INVALID}))`]: {
+	            ...shorthands.borderColor(tokens.colorBrandStroke1),
+	        },
+	        // v9 only draws its red edge while the field is not focused, and its own `:focus-within` grey
+	        // outranks a plain rule here; `!important` (as in SharedPortal) keeps the red on focus too.
+	        [`&${INVALID}, &:has(${INVALID})`]: {
+	            ...shorthands.borderColor(`${tokens.colorPaletteRedBorder2} !important`),
+	        },
+	        "&:has(:disabled)": {
+	            backgroundColor: "#F5F5F5",
+	            ...shorthands.borderColor("#DDDDDD"),
+	        },
 	    },
 	    // v9 Dropdown/Combobox roots are inline-block with a 250-400px width window; v8's filled its column.
 	    fill: {
@@ -45785,7 +46382,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	const SSASTextInput = reactExports.forwardRef(({ label, errorMessage, hint, fonts, required, className, ...props }, ref) => {
 	    const styles = useFieldStyles();
 	    return (React.createElement(Field, { label: label ? { children: label, style: fieldLabelStyle(fonts) } : undefined, hint: hint, required: !!required, validationState: errorMessage ? "error" : "none", validationMessage: errorMessage },
-	        React.createElement(Input, { ref: ref, className: mergeClasses(styles.input, className), ...props })));
+	        React.createElement(Input, { ref: ref, className: mergeClasses(styles.input, styles.fill, className), ...props })));
 	});
 	SSASTextInput.displayName = "SSASTextInput";
 
@@ -45897,21 +46494,43 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	};
 
 	/**
-	 * Ported from SharedPortal's `ControlledComboBox` (`Field` + `Combobox freeform`). v8's `allowFreeInput`
-	 * had no per-call-site toggle, so `freeform` stays unconditional. The form value is `option.key` when it
-	 * is a string, else `option.text`, as before; the country list has string keys.
+	 * Ported from SharedPortal's `ControlledComboBox` (`Field` + `Combobox freeform`). Typed text is kept
+	 * apart from the field (`typedText`) and resolved on blur: an exact (case-insensitive) option match
+	 * selects that option, anything else clears both, so only a listed option can ever reach the form and
+	 * the `required` rule still fails on unmatched text. The form value is `option.key` when it is a string,
+	 * else `option.text`; the country list has string keys.
 	 */
-	const ControlledCombobox = ({ name, control, rules, defaultValue, options, label, placeholder, required, disabled, autoComplete, style, className, fonts, }) => {
+	const ComboboxField = ({ value, onChange, onBlur, errorMessage, options, label, placeholder, required, disabled, autoComplete, style, className, fonts, }) => {
 	    const styles = useFieldStyles();
-	    return (React.createElement(Controller, { name: name, control: control, rules: rules, defaultValue: defaultValue || "", render: ({ field: { onChange, onBlur, value }, fieldState: { error } }) => {
-	            const matchedOption = options.find((o) => String(o.key) === String(value));
-	            return (React.createElement(Field, { label: label ? { children: label, style: fieldLabelStyle(fonts) } : undefined, required: required, validationState: error ? "error" : "none", validationMessage: error?.message },
-	                React.createElement(Combobox, { freeform: true, value: matchedOption ? matchedOption.text : value ?? "", selectedOptions: matchedOption ? [String(matchedOption.key)] : [], placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, style: style, className: mergeClasses(styles.input, styles.fill, className), onOptionSelect: (_, data) => {
-	                        const option = options.find((o) => String(o.key) === data.optionValue);
-	                        if (option)
-	                            onChange(typeof option.key === "string" ? option.key : option.text);
-	                    }, onChange: (e) => onChange(e.target.value), onBlur: onBlur }, options.map((option) => (React.createElement(Option, { key: option.key, value: String(option.key), text: option.text }, option.text))))));
-	        } }));
+	    const matchedOption = options.find((o) => String(o.key) === String(value));
+	    // `null` while not typing, so the input shows the selected option's text. A ref, because Tab both
+	    // selects the highlighted option and blurs in one go — the blur handler must see that selection.
+	    const typedTextRef = reactExports.useRef(null);
+	    const [typedText, setTypedText] = reactExports.useState(null);
+	    const updateTypedText = (text) => {
+	        typedTextRef.current = text;
+	        setTypedText(text);
+	    };
+	    const commit = (option) => {
+	        onChange(option ? (typeof option.key === "string" ? option.key : option.text) : "");
+	        updateTypedText(null);
+	    };
+	    return (React.createElement(Field, { label: label ? { children: label, style: fieldLabelStyle(fonts) } : undefined, required: required, validationState: errorMessage ? "error" : "none", validationMessage: errorMessage },
+	        React.createElement(Combobox, { freeform: true, value: typedText ?? matchedOption?.text ?? "", selectedOptions: matchedOption ? [String(matchedOption.key)] : [], placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, style: style, className: mergeClasses(styles.input, styles.fill, className), onOptionSelect: (_, data) => {
+	                const option = options.find((o) => String(o.key) === data.optionValue);
+	                if (option)
+	                    commit(option);
+	            }, onChange: (e) => updateTypedText(e.target.value), onBlur: () => {
+	                const text = typedTextRef.current;
+	                if (text !== null) {
+	                    const search = text.trim().toLowerCase();
+	                    commit(search ? options.find((o) => o.text.toLowerCase() === search) : undefined);
+	                }
+	                onBlur();
+	            } }, options.map((option) => (React.createElement(Option, { key: option.key, value: String(option.key), text: option.text }, option.text))))));
+	};
+	const ControlledCombobox = ({ name, control, rules, defaultValue, ...props }) => {
+	    return (React.createElement(Controller, { name: name, control: control, rules: rules, defaultValue: defaultValue || "", render: ({ field: { onChange, onBlur, value }, fieldState: { error } }) => (React.createElement(ComboboxField, { ...props, value: value, onChange: onChange, onBlur: onBlur, errorMessage: error?.message })) }));
 	};
 
 	// eslint-disable-next-line @typescript-eslint/no-namespace
@@ -46055,21 +46674,6 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	    return (React.createElement(React.Fragment, null, renderList.map((component) => renderByType(component, component.name))));
 	};
 
-	/**
-	 * Deep merge utility
-	 */
-	/**
-	 * Check if current language is RTL
-	 */
-	function isRTLContent(languageCode) {
-	    const rtlLanguages = ['ar', 'he'];
-	    if (languageCode) {
-	        return rtlLanguages.includes(languageCode.toLowerCase());
-	    }
-	    // Try to detect from document or i18n
-	    return false;
-	}
-
 	// v8 ChoiceGroup root: 30px under the group.
 	const useRadioStyles = makeStyles({
 	    root: {
@@ -46079,7 +46683,6 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	const UpperFormSection = ({ isRegistering, performByPartner, setPerformByPartner, setValue, setError, clearErrors, control, errors, trigger, watch, translation, config, apiService, styles, countryOptions, orgSizingOptions, orgIndustryOptions, hearAboutOptions, partnerData, primaryColor: primaryColorProp, }) => {
 	    const primaryColor = primaryColorProp || "#00BAE4";
 	    const radioStyles = useRadioStyles();
-	    const isRTL = isRTLContent(partnerData?.languageCode);
 	    const choiceGroupOptions = [
 	        { key: "ByCustomer", text: translation.ByCustomer },
 	        { key: "ByPartner", text: translation.ByPartner },
@@ -46105,9 +46708,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	        isHearAbout ? exports.FormModel.HearAbout : false,
 	    ];
 	    return (React.createElement(React.Fragment, null,
-	        React.createElement(RadioGroup, { defaultValue: "ByCustomer", className: radioStyles.root, 
-	            // v8's `flexDirection: row-reverse` pushed the options to the right edge for RTL
-	            style: isRTL ? { alignItems: "flex-end" } : undefined, onChange: (_e, data) => {
+	        React.createElement(RadioGroup, { defaultValue: "ByCustomer", className: radioStyles.root, onChange: (_e, data) => {
 	                // Reset the partner fields
 	                setValue(exports.FormModel.CustomerPartnerMail, "");
 	                setValue(exports.FormModel.CustomerPartnerName, "");
@@ -46811,6 +47412,15 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	        ":active:where(:not(:disabled, [aria-disabled='true']))": {
 	            backgroundColor: `color-mix(in srgb, var(${BRAND_VAR}), #000 15%) !important`,
 	        },
+	        // v9 draws its keyboard focus ring with `border` and `box-shadow`, and the inline `border: none`
+	        // and drop shadow here overwrite both, so a focused button showed no ring at all. Redrawn as an
+	        // outline (which nothing inline sets) plus an inner white ring, readable on light and dark
+	        // backgrounds alike.
+	        ":focus-visible": {
+	            outline: "2px solid #000 !important",
+	            outlineOffset: "2px",
+	            boxShadow: "inset 0 0 0 2px #fff !important",
+	        },
 	    },
 	});
 	const baseStyle = (noShadow, disabled) => ({
@@ -46843,20 +47453,26 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	};
 	const SSASPrimaryButton = (props) => {
 	    const classes = useStyles();
+	    // From `FormThemeProvider`, which sets it from the form's language.
+	    const { dir } = useFluent();
 	    const { styles, primaryColor, noShadow, iconProps, noIcon, iconName, loadingIcon, onRenderMenuIcon, text, className, style, disabled, type, onClick, children, } = props;
 	    const color = primaryColor || DEFAULT_PRIMARY_COLOR;
 	    const isDisabled = disabled || loadingIcon;
+	    // While loading the button is blocked but stays focusable (`aria-disabled`, not `disabled`): a truly
+	    // disabled button drops keyboard focus to the page body, so a visitor who pressed Enter on it
+	    // would be thrown back to the top of the tab order.
+	    const isBlockedWhileLoading = !!loadingIcon && !disabled;
 	    const brandStyle = {
 	        [BRAND_VAR]: color,
 	        ...(isDisabled ? {} : { backgroundColor: `var(${BRAND_VAR})`, color: "#fff" }),
 	    };
 	    const mergedStyle = { ...brandStyle, ...baseStyle(noShadow, isDisabled), ...styles?.root, ...style };
 	    // v8 rendered a trailing chevron by default, direction-aware, unless noIcon was set.
-	    const defaultIconName = isRTLContent() ? "ChevronLeft" : "ChevronRight";
+	    const defaultIconName = dir === "rtl" ? "ChevronLeft" : "ChevronRight";
 	    const defaultIcon = iconFor(iconName ?? defaultIconName, isDisabled);
 	    // `onRenderMenuIcon` is checked first: the caller implements its own loading-spinner-vs-default
 	    // logic and calls `defaultRender()` on the non-loading branch.
-	    const icon = onRenderMenuIcon ? (onRenderMenuIcon(props, () => defaultIcon ?? null) ?? undefined) : loadingIcon ? (reactExports.createElement(Spinner, { size: "tiny" })) : noIcon ? undefined : (defaultIcon);
+	    const icon = onRenderMenuIcon ? (onRenderMenuIcon(props, () => defaultIcon ?? null) ?? undefined) : loadingIcon ? (reactExports.createElement(Spinner, { "aria-label": "Loading", size: "tiny" })) : noIcon ? undefined : (defaultIcon);
 	    const iconPosition = iconProps ? "before" : "after";
 	    // A trailing icon makes the content lopsided; extra start padding rebalances it, and
 	    // `mergedStyle` goes last so a call site's own padding still wins.
@@ -46864,7 +47480,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	        ...(icon && iconPosition === "after" ? { paddingInlineStart: 20 } : {}),
 	        ...mergedStyle,
 	    };
-	    return (reactExports.createElement(Button, { appearance: "primary", className: mergeClasses(classes.interactive, className), style: balancedStyle, icon: icon, iconPosition: iconPosition, disabled: isDisabled, type: type, onClick: onClick }, text ?? children));
+	    return (reactExports.createElement(Button, { appearance: "primary", className: mergeClasses(classes.interactive, className), style: balancedStyle, icon: icon, iconPosition: iconPosition, disabled: disabled, disabledFocusable: isBlockedWhileLoading, type: type, onClick: onClick }, text ?? children));
 	};
 
 	const LowerFormSection = ({ setValue, isRegistering, errors, translation, submissionError, primaryColor: primaryColorProp, partnerData, }) => {
@@ -46909,7 +47525,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	    const renderLoadingIcon = (_props, defaultRender) => {
 	        // v8 `SpinnerSize.medium` (20px) maps to v9 "tiny"
 	        if (isRegistering)
-	            return React.createElement(Spinner, { size: "tiny" });
+	            return React.createElement(Spinner, { "aria-label": "Submitting", size: "tiny" });
 	        else
 	            return defaultRender ? defaultRender() : null;
 	    };
@@ -46935,7 +47551,9 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	            React.createElement("span", { style: { fontSize: 16, fontWeight: 600 } }, "\u26A0"),
 	            React.createElement("span", null, submissionError))),
 	        React.createElement(SSASPrimaryButton, { text: translation.SubmitRequest, primaryColor: primaryColor, styles: {
-	                root: { display: "block", width: "100%" },
+	                // `flex`, not `block`: v9 Button centres its icon and label as flex items, and
+	                // `block` dropped the icon onto the text baseline, a few px above the label.
+	                root: { display: "flex", width: "100%" },
 	            }, type: "submit", disabled: Object.keys(errors).length > 0 ||
 	                isRegistering ||
 	                !termAcceptance ||
@@ -47006,6 +47624,8 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	        return (languageOptions.find((x) => x.data.code === currentLang)?.text ||
 	            "English");
 	    }, [mergedConfig.languageCode, partnerData?.languageCode, languageOptions]);
+	    // Same language the translations are loaded in (`getFormScreenLocalization` below).
+	    const formDir = isRTLContent(mergedConfig.languageCode || partnerData?.languageCode) ? "rtl" : "ltr";
 	    const { handleSubmit, setValue, setError, control, watch, clearErrors, trigger, formState: { errors }, } = useForm({
 	        defaultValues: {
 	            orgSizingId: 1,
@@ -47244,7 +47864,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	    // Show success screen if registration completed
 	    if (finalStep) {
 	        // Default success screen
-	        return (React.createElement(FormThemeProvider, { primaryColor: mergedConfig.theme?.primaryColor || colorWidget?.column1, fonts: mergedConfig.theme?.fonts },
+	        return (React.createElement(FormThemeProvider, { primaryColor: mergedConfig.theme?.primaryColor || colorWidget?.column1, fonts: mergedConfig.theme?.fonts, dir: formDir },
 	            React.createElement("div", { className: styles.mainContainer, style: mainContainerStyle },
 	                React.createElement("div", { className: styles.thankyouTopWrapper },
 	                    React.createElement("div", { className: styles.finalStepContainer },
@@ -47253,6 +47873,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	                                    fontSize: mergedConfig.theme?.fonts?.sizes
 	                                        ?.heading,
 	                                    fontWeight: 700,
+	                                    lineHeight: 1.2,
 	                                } }, translation.ThankYou),
 	                            React.createElement("div", { style: {
 	                                    fontSize: mergedConfig.theme?.fonts?.sizes
@@ -47269,7 +47890,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	                                    textUnderlinePosition: "under",
 	                                } }, finalStep)))))));
 	    }
-	    return (React.createElement(FormThemeProvider, { primaryColor: mergedConfig.theme?.primaryColor || colorWidget?.column1, fonts: mergedConfig.theme?.fonts },
+	    return (React.createElement(FormThemeProvider, { primaryColor: mergedConfig.theme?.primaryColor || colorWidget?.column1, fonts: mergedConfig.theme?.fonts, dir: formDir },
 	        React.createElement("div", { className: styles.mainContainer, style: mainContainerStyle },
 	            React.createElement("div", { className: styles.topWrapper, style: mergedConfig.customStyles?.topWrapper }, isLoadingData ? (React.createElement(Spinner, { size: "tiny", labelPosition: "below", label: "Loading form data...", style: { marginBottom: "20px" } })) : partnerLoadFailed ? (React.createElement("div", { style: {
 	                    textAlign: "center",
@@ -47280,6 +47901,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	                        fontSize: mergedConfig.theme?.fonts?.sizes?.heading ||
 	                            24,
 	                        fontWeight: 700,
+	                        lineHeight: 1.2,
 	                        marginBottom: 16,
 	                    } }, "Access Not Available"),
 	                React.createElement("div", { style: {
@@ -47295,6 +47917,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	                        fontSize: mergedConfig.theme?.fonts?.sizes?.heading ||
 	                            24,
 	                        fontWeight: 700,
+	                        lineHeight: 1.2,
 	                        marginBottom: 16,
 	                    } }, "Domain Not Whitelisted"),
 	                React.createElement("div", { style: {
@@ -47307,6 +47930,7 @@ For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upg
 	                            fontSize: mergedConfig.theme?.fonts?.sizes
 	                                ?.heading,
 	                            fontWeight: 700,
+	                            lineHeight: 1.2,
 	                        } }, translation.AppForm),
 	                    React.createElement("div", { style: {
 	                            fontSize: mergedConfig.theme?.fonts?.sizes