@ankhorage/zora 0.8.1 → 0.10.0

package/src/components/button/types.ts

@@ -2,11 +2,10 @@ import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhora
 import type React from 'react';
 
 import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface ButtonProps extends Omit<
-  SurfaceButtonProps,
-  'children' | 'size' | 'tone' | 'variant'
-> {
+export interface ButtonProps
+  extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'tone' | 'variant'> {
   children?: React.ReactNode;
   tone?: ZoraTone;
   emphasis?: ZoraEmphasis;

package/src/components/card/Card.tsx

@@ -2,11 +2,14 @@ import { Box, Card as SurfaceCard, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { resolveCardVariant } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';
 import { Text } from '../text';
 import type { CardProps } from './types';
 
-export function Card({
+function CardInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   title,
   description,
@@ -65,3 +68,5 @@ export function Card({
     </SurfaceCard>
   );
 }
+
+export const Card = withZoraThemeScope(CardInner);

package/src/components/card/types.ts

@@ -2,8 +2,10 @@ import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { ZoraCardTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface CardProps extends Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
+export interface CardProps
+  extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
   children?: React.ReactNode;
   title?: React.ReactNode;
   description?: React.ReactNode;

package/src/components/heading/Heading.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Text as ReactNativeText } from 'react-native';
 
 import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { resolveHeadingRecipe, resolveHeadingSizeFromLevel } from './resolveHeadingRecipe';
 import type { HeadingProps } from './types';
 
@@ -30,7 +31,9 @@ function resolveHeadingContent({
   return i18nKey;
 }
 
-export function Heading({
+function HeadingInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   text,
   i18nKey,
@@ -84,3 +87,5 @@ export function Heading({
     </ReactNativeText>
   );
 }
+
+export const Heading = withZoraThemeScope(HeadingInner);

package/src/components/heading/types.ts

@@ -2,6 +2,8 @@ import type { Responsive } from '@ankhorage/surface';
 import type React from 'react';
 import type { AccessibilityRole, TextStyle } from 'react-native';
 
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -20,7 +22,7 @@ export type HeadingAlign = NonNullable<TextStyle['textAlign']>;
 
 export type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
 
-export interface HeadingProps {
+export interface HeadingProps extends ZoraBaseProps {
   children?: React.ReactNode;
   text?: string;
   i18nKey?: string;
@@ -37,5 +39,4 @@ export interface HeadingProps {
   accessibilityHint?: string;
   accessibilityRole?: AccessibilityRole;
   nativeID?: string;
-  testID?: string;
 }

package/src/components/icon/Icon.tsx

@@ -1,8 +1,13 @@
 import { Icon as SurfaceIcon, type IconProps as SurfaceIconProps } from '@ankhorage/surface';
 import React from 'react';
 
-export type IconProps = SurfaceIconProps;
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export function Icon(props: IconProps) {
+export interface IconProps extends ZoraBaseProps, SurfaceIconProps {}
+
+function IconInner({ themeId: _themeId, mode: _mode, ...props }: IconProps) {
   return <SurfaceIcon {...props} />;
 }
+
+export const Icon = withZoraThemeScope(IconInner);

package/src/components/icon-button/IconButton.tsx

@@ -2,9 +2,12 @@ import { IconButton as SurfaceIconButton } from '@ankhorage/surface';
 import React from 'react';
 
 import { resolveButtonRecipe } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { IconButtonProps } from './types';
 
-export function IconButton({
+function IconButtonInner({
+  themeId: _themeId,
+  mode: _mode,
   icon,
   label,
   emphasis = 'ghost',
@@ -25,3 +28,5 @@ export function IconButton({
     />
   );
 }
+
+export const IconButton = withZoraThemeScope(IconButtonInner);

package/src/components/icon-button/types.ts

@@ -1,8 +1,9 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 
 import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface IconButtonProps {
+export interface IconButtonProps extends ZoraBaseProps {
   icon: ButtonIconSpec;
   label: string;
   emphasis?: ZoraEmphasis;

package/src/components/text/Text.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Text as ReactNativeText } from 'react-native';
 
 import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { resolveTextStyle } from './resolveTextRecipe';
 import type { TextProps } from './types';
 
@@ -30,7 +31,9 @@ function resolveTextContent({
   return i18nKey;
 }
 
-export function Text({
+function TextInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   text,
   i18nKey,
@@ -82,3 +85,5 @@ export function Text({
     </ReactNativeText>
   );
 }
+
+export const Text = withZoraThemeScope(TextInner);

package/src/components/text/types.ts

@@ -2,6 +2,8 @@ import type { Responsive } from '@ankhorage/surface';
 import type React from 'react';
 import type { AccessibilityRole, TextStyle } from 'react-native';
 
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
 export type TextVariant = 'body' | 'lead' | 'bodySmall' | 'caption' | 'label' | 'eyebrow' | 'code';
 
 export type TextTone =
@@ -18,7 +20,7 @@ export type TextWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
 
 export type TextAlign = NonNullable<TextStyle['textAlign']>;
 
-export interface TextProps {
+export interface TextProps extends ZoraBaseProps {
   children?: React.ReactNode;
   text?: string;
   i18nKey?: string;
@@ -34,5 +36,4 @@ export interface TextProps {
   accessibilityHint?: string;
   accessibilityRole?: AccessibilityRole;
   nativeID?: string;
-  testID?: string;
 }

package/src/patterns/panel/Panel.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 
 import { Card } from '../../components/card';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PanelProps } from './types';
 
-export function Panel(props: PanelProps) {
+function PanelInner({ themeId: _themeId, mode: _mode, ...props }: PanelProps) {
   return <Card {...props} />;
 }
+
+export const Panel = withZoraThemeScope(PanelInner);

package/src/patterns/panel/types.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 
 import type { ZoraCardTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface PanelProps {
+export interface PanelProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   eyebrow?: React.ReactNode;
@@ -11,5 +12,4 @@ export interface PanelProps {
   children?: React.ReactNode;
   tone?: ZoraCardTone;
   compact?: boolean;
-  testID?: string;
 }

package/src/theme/ZoraBaseProps.ts

@@ -0,0 +1,20 @@
+import type { ZoraThemeId, ZoraThemeMode } from './types';
+
+export interface ZoraBaseProps {
+  /**
+   * Overrides the active ZORA theme for this component and its subtree.
+   * If omitted, the nearest parent theme is inherited.
+   *
+   * Plan 2: theme registries are not available yet. Only the inherited theme id
+   * is valid; unknown ids throw in dev/test and warn+fallback in production.
+   */
+  themeId?: ZoraThemeId;
+
+  /**
+   * Overrides the light/dark mode for this component and its subtree.
+   * If omitted, the nearest parent mode is inherited.
+   */
+  mode?: ZoraThemeMode;
+
+  testID?: string;
+}

package/src/theme/ZoraProvider.tsx

@@ -1,22 +1,29 @@
-import { ResponsiveProvider, ThemeProvider } from '@ankhorage/surface';
+import { ThemeProvider } from '@ankhorage/surface';
 import React from 'react';
 
-import { createZoraTheme, type ZoraThemeOverride } from './createZoraTheme';
+import { createZoraThemeConfig } from './createZoraThemeConfig';
+import type { ZoraTheme, ZoraThemeMode } from './types';
+import { zoraDefaultTheme } from './zoraDefaultTheme';
+import { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
 
 export interface ZoraProviderProps {
   children: React.ReactNode;
-  initialConfig?: ZoraThemeOverride;
-  initialMode?: 'light' | 'dark';
+  theme?: ZoraTheme;
+  initialMode?: ZoraThemeMode;
 }
 
 export function ZoraProvider({
   children,
-  initialConfig,
+  theme = zoraDefaultTheme,
   initialMode = 'light',
 }: ZoraProviderProps) {
+  const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);
+
   return (
-    <ThemeProvider initialConfig={createZoraTheme(initialConfig)} initialMode={initialMode}>
-      <ResponsiveProvider>{children}</ResponsiveProvider>
-    </ThemeProvider>
+    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>
+      <ThemeProvider initialConfig={createZoraThemeConfig(theme)} initialMode={initialMode}>
+        {children}
+      </ThemeProvider>
+    </ZoraThemeRuntimeContext.Provider>
   );
 }

package/src/theme/ZoraThemeRuntimeContext.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+import type { ZoraTheme, ZoraThemeId } from './types';
+import { zoraDefaultTheme } from './zoraDefaultTheme';
+
+interface ZoraThemeRuntime {
+  sourceTheme: ZoraTheme;
+  themeId: ZoraThemeId;
+}
+
+export const ZoraThemeRuntimeContext = createContext<ZoraThemeRuntime>({
+  sourceTheme: zoraDefaultTheme,
+  themeId: zoraDefaultTheme.id,
+});
+
+export function useZoraThemeRuntime(): ZoraThemeRuntime {
+  return useContext(ZoraThemeRuntimeContext);
+}

package/src/theme/ZoraThemeScope.tsx

@@ -0,0 +1,74 @@
+import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';
+import React, { useMemo } from 'react';
+
+import { createZoraThemeConfig } from './createZoraThemeConfig';
+import { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';
+import type { ZoraThemeId, ZoraThemeMode } from './types';
+import { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
+
+export interface ZoraThemeScopeProps {
+  children: React.ReactNode;
+  themeId?: ZoraThemeId;
+  mode?: ZoraThemeMode;
+}
+
+function ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {
+  const parentSurface = useTheme();
+  const parentRuntime = useZoraThemeRuntime();
+  const { activeFontId } = useFontContext();
+
+  const scopedThemeId = resolveZoraScopedThemeId({
+    desiredThemeId: themeId,
+    inheritedThemeId: parentRuntime.themeId,
+  });
+
+  const scopedMode = mode ?? parentSurface.mode;
+
+  // Plan 2: there is no multi-theme registry yet. Keep the active theme seed inherited.
+  const surfaceConfig = useMemo(
+    () => createZoraThemeConfig(parentRuntime.sourceTheme),
+    [parentRuntime.sourceTheme],
+  );
+
+  const scopedTheme = useMemo(
+    () => createTheme(surfaceConfig, scopedMode, activeFontId),
+    [surfaceConfig, scopedMode, activeFontId],
+  );
+
+  const scopedSurfaceValue = useMemo(
+    () => ({
+      theme: scopedTheme,
+      mode: scopedMode,
+      setMode: parentSurface.setMode,
+      setThemeConfig: parentSurface.setThemeConfig,
+      _hasProvider: true,
+    }),
+    [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme],
+  );
+
+  const scopedRuntimeValue = useMemo(
+    () => ({
+      sourceTheme: parentRuntime.sourceTheme,
+      themeId: scopedThemeId,
+    }),
+    [parentRuntime.sourceTheme, scopedThemeId],
+  );
+
+  return (
+    <ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>
+      <ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>
+    </ZoraThemeRuntimeContext.Provider>
+  );
+}
+
+export function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {
+  if (mode === undefined && themeId === undefined) {
+    return children;
+  }
+
+  return (
+    <ZoraThemeScopeInner mode={mode} themeId={themeId}>
+      {children}
+    </ZoraThemeScopeInner>
+  );
+}

package/src/theme/createZoraThemeConfig.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'bun:test';
+
+import { createZoraThemeConfig } from './createZoraThemeConfig';
+
+describe('createZoraThemeConfig', () => {
+  test('converts the default theme seed into a surface config', () => {
+    const themeConfig = createZoraThemeConfig();
+
+    expect(themeConfig.id).toBe('zora');
+    expect(themeConfig.name).toBe('ZORA');
+    expect(themeConfig.light.primaryColor).toBe('#0f766e');
+    expect(themeConfig.light.harmony).toBe('analogous');
+    expect(themeConfig.light.systemTone).toBe('jewel');
+    expect(themeConfig.dark.primaryColor).toBe('#0f766e');
+    expect(themeConfig.dark.harmony).toBe('analogous');
+    expect(themeConfig.dark.systemTone).toBe('jewel');
+  });
+
+  test('falls back to id when name is omitted', () => {
+    const themeConfig = createZoraThemeConfig({
+      id: 'studio',
+      primaryColor: '#0f766e',
+      harmony: 'analogous',
+      tone: 'jewel',
+    });
+
+    expect(themeConfig.id).toBe('studio');
+    expect(themeConfig.name).toBe('studio');
+    expect(themeConfig.light.primaryColor).toBe('#0f766e');
+    expect(themeConfig.light.harmony).toBe('analogous');
+    expect(themeConfig.light.systemTone).toBe('jewel');
+    expect(themeConfig.dark.primaryColor).toBe('#0f766e');
+    expect(themeConfig.dark.harmony).toBe('analogous');
+    expect(themeConfig.dark.systemTone).toBe('jewel');
+  });
+});

package/src/theme/createZoraThemeConfig.ts

@@ -0,0 +1,27 @@
+import type { ThemeConfig } from '@ankhorage/surface';
+
+import type { ZoraHexColor, ZoraTheme, ZoraThemeMode } from './types';
+import { zoraDefaultTheme } from './zoraDefaultTheme';
+
+function resolveModePrimaryColor(primaryColor: ZoraHexColor, _mode: ZoraThemeMode): ZoraHexColor {
+  // Intentionally conservative in Plan 1: mode-specific primary derivation
+  // (OKLCH/lightness scale, etc.) comes in later theme-engine work.
+  return primaryColor;
+}
+
+export function createZoraThemeConfig(theme: ZoraTheme = zoraDefaultTheme): ThemeConfig {
+  return {
+    id: theme.id,
+    name: theme.name ?? theme.id,
+    light: {
+      primaryColor: resolveModePrimaryColor(theme.primaryColor, 'light'),
+      harmony: theme.harmony,
+      systemTone: theme.tone,
+    },
+    dark: {
+      primaryColor: resolveModePrimaryColor(theme.primaryColor, 'dark'),
+      harmony: theme.harmony,
+      systemTone: theme.tone,
+    },
+  };
+}

package/src/theme/index.ts

@@ -1,6 +1,18 @@
-export type { ZoraThemeOverride } from './createZoraTheme';
-export { createZoraTheme } from './createZoraTheme';
+export { createZoraThemeConfig } from './createZoraThemeConfig';
+export type {
+  ZoraColorHarmony,
+  ZoraColorTone,
+  ZoraComputedTheme,
+  ZoraHexColor,
+  ZoraTheme,
+  ZoraThemeId,
+  ZoraThemeMode,
+} from './types';
 export { useZoraTheme } from './useZoraTheme';
+export { withZoraThemeScope } from './withZoraThemeScope';
+export type { ZoraBaseProps } from './ZoraBaseProps';
+export { zoraDefaultTheme } from './zoraDefaultTheme';
 export type { ZoraProviderProps } from './ZoraProvider';
 export { ZoraProvider } from './ZoraProvider';
-export { zoraTheme } from './zoraTheme';
+export type { ZoraThemeScopeProps } from './ZoraThemeScope';
+export { ZoraThemeScope } from './ZoraThemeScope';

package/src/theme/resolveZoraScopedThemeId.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';
+
+describe('resolveZoraScopedThemeId', () => {
+  it('inherits the theme id when omitted', () => {
+    expect(resolveZoraScopedThemeId({ desiredThemeId: undefined, inheritedThemeId: 'zora' })).toBe(
+      'zora',
+    );
+  });
+
+  it('accepts the inherited theme id when explicitly provided', () => {
+    expect(resolveZoraScopedThemeId({ desiredThemeId: 'zora', inheritedThemeId: 'zora' })).toBe(
+      'zora',
+    );
+  });
+
+  it('throws in non-production for unknown theme ids', () => {
+    const originalEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'test';
+
+    expect(() =>
+      resolveZoraScopedThemeId({ desiredThemeId: 'studio', inheritedThemeId: 'zora' }),
+    ).toThrow(/Unknown ZORA theme id 'studio'/);
+
+    process.env.NODE_ENV = originalEnv;
+  });
+
+  it('warns and falls back in production for unknown theme ids', () => {
+    const originalEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+
+    const originalWarn = console.warn;
+    const warnings: string[] = [];
+    console.warn = (message: string) => {
+      warnings.push(message);
+    };
+
+    expect(resolveZoraScopedThemeId({ desiredThemeId: 'studio', inheritedThemeId: 'zora' })).toBe(
+      'zora',
+    );
+    expect(warnings.join('\n')).toMatch(/Unknown ZORA theme id 'studio'/);
+
+    console.warn = originalWarn;
+    process.env.NODE_ENV = originalEnv;
+  });
+});

package/src/theme/resolveZoraScopedThemeId.ts

@@ -0,0 +1,25 @@
+import type { ZoraThemeId } from './types';
+
+export function resolveZoraScopedThemeId({
+  desiredThemeId,
+  inheritedThemeId,
+}: {
+  desiredThemeId: ZoraThemeId | undefined;
+  inheritedThemeId: ZoraThemeId;
+}): ZoraThemeId {
+  if (desiredThemeId === undefined || desiredThemeId === inheritedThemeId) {
+    return inheritedThemeId;
+  }
+
+  const message = [
+    `Unknown ZORA theme id '${desiredThemeId}'.`,
+    'Theme registries are not available yet; register the theme before using themeId scopes.',
+  ].join(' ');
+
+  if (process.env.NODE_ENV === 'production') {
+    console.warn(message);
+    return inheritedThemeId;
+  }
+
+  throw new Error(message);
+}

package/src/theme/themeScopeStructure.test.ts

@@ -0,0 +1,99 @@
+/**
+ * Replace themeScopeStructure.test.ts with real behavior tests once the ZORA component test strategy is decided.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, it } from 'bun:test';
+
+const themeDir = import.meta.dir;
+
+const zoraProviderSource = readFileSync(join(themeDir, 'ZoraProvider.tsx'), 'utf8');
+const themeScopeSource = readFileSync(join(themeDir, 'ZoraThemeScope.tsx'), 'utf8');
+const hocSource = readFileSync(join(themeDir, 'withZoraThemeScope.tsx'), 'utf8');
+
+const textSource = readFileSync(join(themeDir, '..', 'components', 'text', 'Text.tsx'), 'utf8');
+const headingSource = readFileSync(
+  join(themeDir, '..', 'components', 'heading', 'Heading.tsx'),
+  'utf8',
+);
+const buttonSource = readFileSync(
+  join(themeDir, '..', 'components', 'button', 'Button.tsx'),
+  'utf8',
+);
+const iconSource = readFileSync(join(themeDir, '..', 'components', 'icon', 'Icon.tsx'), 'utf8');
+const iconButtonSource = readFileSync(
+  join(themeDir, '..', 'components', 'icon-button', 'IconButton.tsx'),
+  'utf8',
+);
+const cardSource = readFileSync(join(themeDir, '..', 'components', 'card', 'Card.tsx'), 'utf8');
+const panelSource = readFileSync(join(themeDir, '..', 'patterns', 'panel', 'Panel.tsx'), 'utf8');
+
+const textTypesSource = readFileSync(
+  join(themeDir, '..', 'components', 'text', 'types.ts'),
+  'utf8',
+);
+const headingTypesSource = readFileSync(
+  join(themeDir, '..', 'components', 'heading', 'types.ts'),
+  'utf8',
+);
+const panelTypesSource = readFileSync(
+  join(themeDir, '..', 'patterns', 'panel', 'types.ts'),
+  'utf8',
+);
+
+describe('theme scope structure', () => {
+  it('keeps ZoraProvider lightweight (no extra ResponsiveProvider nesting)', () => {
+    expect(zoraProviderSource).toMatch(/ThemeProvider/);
+    expect(zoraProviderSource).toMatch(/ZoraThemeRuntimeContext\.Provider/);
+    expect(zoraProviderSource).not.toMatch(/ResponsiveProvider/);
+  });
+
+  it('implements nested scopes without nesting Surface ThemeProvider', () => {
+    expect(themeScopeSource).toMatch(/ThemeContext\.Provider/);
+    expect(themeScopeSource).toMatch(/createTheme\(/);
+    expect(themeScopeSource).not.toMatch(/ThemeProvider/);
+  });
+
+  it('wraps components only when mode/themeId overrides are present', () => {
+    expect(hocSource).toMatch(/props\.mode === undefined/);
+    expect(hocSource).toMatch(/props\.themeId === undefined/);
+    expect(hocSource).toMatch(/<ZoraThemeScope/);
+  });
+
+  it('adopts the inner + HOC pattern for the first component set', () => {
+    expect(textSource).toMatch(/themeId: _themeId/);
+    expect(textSource).toMatch(/mode: _mode/);
+    expect(textSource).toMatch(/export const Text = withZoraThemeScope/);
+
+    expect(headingSource).toMatch(/themeId: _themeId/);
+    expect(headingSource).toMatch(/mode: _mode/);
+    expect(headingSource).toMatch(/export const Heading = withZoraThemeScope/);
+
+    expect(buttonSource).toMatch(/themeId: _themeId/);
+    expect(buttonSource).toMatch(/mode: _mode/);
+    expect(buttonSource).toMatch(/export const Button = withZoraThemeScope/);
+
+    expect(iconSource).toMatch(/themeId: _themeId/);
+    expect(iconSource).toMatch(/mode: _mode/);
+    expect(iconSource).toMatch(/export const Icon = withZoraThemeScope/);
+
+    expect(iconButtonSource).toMatch(/themeId: _themeId/);
+    expect(iconButtonSource).toMatch(/mode: _mode/);
+    expect(iconButtonSource).toMatch(/export const IconButton = withZoraThemeScope/);
+
+    expect(cardSource).toMatch(/themeId: _themeId/);
+    expect(cardSource).toMatch(/mode: _mode/);
+    expect(cardSource).toMatch(/export const Card = withZoraThemeScope/);
+
+    expect(panelSource).toMatch(/themeId: _themeId/);
+    expect(panelSource).toMatch(/mode: _mode/);
+    expect(panelSource).toMatch(/export const Panel = withZoraThemeScope/);
+  });
+
+  it('adds ZoraBaseProps to converted public prop types', () => {
+    expect(textTypesSource).toMatch(/export interface TextProps extends ZoraBaseProps/);
+    expect(headingTypesSource).toMatch(/export interface HeadingProps extends ZoraBaseProps/);
+    expect(panelTypesSource).toMatch(/export interface PanelProps extends ZoraBaseProps/);
+  });
+});