@ankhorage/zora 23.0.0 → 23.2.0

package/src/features/auth/adapters/inbound/AuthScreen.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import { Platform } from 'react-native';
+
+import type { AuthScreenProps } from '../../../../types/auth';
+import { KeyboardAvoidingView } from '../../../keyboard-avoiding-view/public';
+import { Divider, ScrollView, View } from '../../../layout/public';
+import { Surface } from '../../../surface/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { Text } from '../../../typography/public';
+import { OAuthProviderList } from './OAuthProviderList';
+import { SignInForm } from './SignInForm';
+import { SignUpForm } from './SignUpForm';
+
+/***
+ * Reusable authentication-screen composition for sign-in and sign-up flows.
+ *
+ * Owns keyboard-safe responsive layout, auth surface presentation, OAuth separation, and
+ * sign-in/sign-up form composition while consumers retain routing and authentication orchestration.
+ */
+export const AuthScreen = withZoraThemeScope(AuthScreenInner);
+
+/*** Render the themed authentication screen while preserving consumer-owned callbacks and state. */
+function AuthScreenInner({
+  themeId: _themeId,
+  mode: _themeMode,
+  interactionPolicy,
+  authMode,
+  title,
+  description,
+  info,
+  error,
+  loading = false,
+  disabled = false,
+  identifiers,
+  identifierLabel,
+  signUpFields,
+  oauthProviders = [],
+  oauthSeparatorLabel = 'or continue with password',
+  onModeChange,
+  onOAuthProviderPress,
+  onSignInSubmit,
+  onSignUpSubmit,
+  testID,
+}: AuthScreenProps) {
+  const effectiveTitle = title ?? (authMode === 'signIn' ? 'Sign in' : 'Create account');
+  const hasOAuth = oauthProviders.length > 0;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.select({ android: 'height', ios: 'padding' })}
+      interactionPolicy={interactionPolicy}
+      style={{ flex: 1 }}
+    >
+      <ScrollView
+        bg="background"
+        contentContainerStyle={{ flexGrow: 1 }}
+        flex={1}
+        interactionPolicy={interactionPolicy}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View
+          align="center"
+          flex={1}
+          interactionPolicy={interactionPolicy}
+          justify="center"
+          px={{ base: 'm', md: 'xl' }}
+          py="xl"
+        >
+          <Surface
+            gap="m"
+            maxWidth={560}
+            p={{ base: 'l', md: 'xl' }}
+            radius="l"
+            testID={testID}
+            variant="outline"
+            width="100%"
+          >
+            <View gap="xs" interactionPolicy={interactionPolicy}>
+              <Text variant="lead" weight="semiBold">
+                {effectiveTitle}
+              </Text>
+              {description ? (
+                <Text emphasis="muted" variant="bodySmall">
+                  {description}
+                </Text>
+              ) : null}
+            </View>
+
+            {hasOAuth ? (
+              <>
+                <OAuthProviderList
+                  disabled={disabled || loading}
+                  interactionPolicy={interactionPolicy}
+                  onProviderPress={onOAuthProviderPress}
+                  providers={oauthProviders}
+                  testID={testID ? `${testID}-oauth` : undefined}
+                />
+                <View align="center" direction="row" gap="s" interactionPolicy={interactionPolicy}>
+                  <View flex={1} interactionPolicy={interactionPolicy}>
+                    <Divider interactionPolicy={interactionPolicy} />
+                  </View>
+                  <Text emphasis="muted" variant="bodySmall">
+                    {oauthSeparatorLabel}
+                  </Text>
+                  <View flex={1} interactionPolicy={interactionPolicy}>
+                    <Divider interactionPolicy={interactionPolicy} />
+                  </View>
+                </View>
+              </>
+            ) : null}
+
+            <AuthScreenForm
+              authMode={authMode}
+              disabled={disabled}
+              error={error}
+              identifierLabel={identifierLabel}
+              identifiers={identifiers}
+              interactionPolicy={interactionPolicy}
+              loading={loading}
+              onModeChange={onModeChange}
+              onSignInSubmit={onSignInSubmit}
+              onSignUpSubmit={onSignUpSubmit}
+              signUpFields={signUpFields}
+              testID={testID ? `${testID}-form` : undefined}
+            />
+
+            {info ? (
+              <Text color="success" variant="bodySmall">
+                {info}
+              </Text>
+            ) : null}
+          </Surface>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+type AuthScreenFormProps = Pick<
+  AuthScreenProps,
+  | 'authMode'
+  | 'disabled'
+  | 'error'
+  | 'identifierLabel'
+  | 'identifiers'
+  | 'interactionPolicy'
+  | 'loading'
+  | 'onModeChange'
+  | 'onSignInSubmit'
+  | 'onSignUpSubmit'
+  | 'signUpFields'
+  | 'testID'
+>;
+
+/*** Render the active ZORA auth form and translate form-switch actions into the shared mode boundary. */
+function AuthScreenForm({
+  authMode,
+  disabled,
+  error,
+  identifierLabel,
+  identifiers,
+  interactionPolicy,
+  loading,
+  onModeChange,
+  onSignInSubmit,
+  onSignUpSubmit,
+  signUpFields,
+  testID,
+}: AuthScreenFormProps) {
+  if (authMode === 'signIn') {
+    return (
+      <SignInForm
+        disabled={disabled}
+        error={error}
+        identifierLabel={identifierLabel}
+        identifiers={identifiers}
+        interactionPolicy={interactionPolicy}
+        loading={loading}
+        onSignUp={onModeChange ? () => onModeChange('signUp') : undefined}
+        onSubmit={onSignInSubmit}
+        signUpLabel="Need an account? Sign up"
+        submitLabel="Sign in"
+        testID={testID}
+      />
+    );
+  }
+
+  return (
+    <SignUpForm
+      disabled={disabled}
+      error={error}
+      fields={signUpFields}
+      interactionPolicy={interactionPolicy}
+      loading={loading}
+      onSignIn={onModeChange ? () => onModeChange('signIn') : undefined}
+      onSubmit={onSignUpSubmit}
+      signInLabel="Already have an account? Sign in"
+      submitLabel="Create account"
+      testID={testID}
+    />
+  );
+}

package/src/features/auth/authScreenMeta.ts

@@ -0,0 +1,114 @@
+import type { ZoraComponentMeta } from '../../types/authoring';
+
+export const authScreenMeta = {
+  name: 'AuthScreen',
+  category: 'pattern',
+  description:
+    'Presents a complete responsive sign-in or sign-up screen while leaving authentication orchestration to the consumer.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Auth screen',
+    defaultProps: {
+      authMode: 'signIn',
+      identifiers: ['email'],
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    modeChange: {
+      label: 'Mode change',
+      eventType: 'authScreen.modeChange',
+      payloadFields: [{ path: 'mode', type: 'string', label: 'Mode' }],
+    },
+    oauthProviderPress: {
+      label: 'OAuth provider press',
+      eventType: 'authScreen.oauthProviderPress',
+      payloadFields: [{ path: 'providerId', type: 'string', label: 'Provider ID' }],
+    },
+    signInSubmit: {
+      label: 'Sign-in submit',
+      eventType: 'authScreen.signInSubmit',
+      payloadFields: [
+        { path: 'identifier', type: 'string', label: 'Identifier' },
+        { path: 'identifierKind', type: 'string', label: 'Identifier kind' },
+        { path: 'secret', type: 'string', label: 'Secret' },
+      ],
+    },
+    signUpSubmit: {
+      label: 'Sign-up submit',
+      eventType: 'authScreen.signUpSubmit',
+      payloadFields: [{ path: 'values', type: 'record', label: 'Values' }],
+    },
+  },
+  props: {
+    authMode: {
+      type: 'enum',
+      category: 'Authentication',
+      label: 'Auth mode',
+      enum: ['signIn', 'signUp'],
+      default: 'signIn',
+    },
+    title: { type: 'string', category: 'Content', label: 'Title' },
+    description: { type: 'string', category: 'Content', label: 'Description' },
+    info: { type: 'string', category: 'State', label: 'Info' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    identifiers: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Identifiers',
+      default: ['email'],
+    },
+    identifierLabel: { type: 'string', category: 'Content', label: 'Identifier label' },
+    signUpFields: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Sign-up fields',
+      itemSchema: [
+        { key: 'name', schema: { type: 'string', category: 'Identity', label: 'Name' } },
+        { key: 'label', schema: { type: 'string', category: 'Content', label: 'Label' } },
+        {
+          key: 'type',
+          schema: {
+            type: 'enum',
+            category: 'Authentication',
+            label: 'Type',
+            enum: ['email', 'number', 'otp', 'password', 'tel', 'text', 'url'],
+          },
+        },
+        {
+          key: 'placeholder',
+          schema: { type: 'string', category: 'Content', label: 'Placeholder' },
+        },
+        {
+          key: 'required',
+          schema: { type: 'boolean', category: 'Validation', label: 'Required' },
+        },
+        {
+          key: 'disabled',
+          schema: { type: 'boolean', category: 'State', label: 'Disabled' },
+        },
+      ],
+    },
+    oauthProviders: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'OAuth providers',
+      itemSchema: [
+        { key: 'id', schema: { type: 'string', category: 'Identity', label: 'Provider ID' } },
+        { key: 'label', schema: { type: 'string', category: 'Content', label: 'Label' } },
+        { key: 'disabled', schema: { type: 'boolean', category: 'State', label: 'Disabled' } },
+        { key: 'loading', schema: { type: 'boolean', category: 'State', label: 'Loading' } },
+      ],
+    },
+    oauthSeparatorLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'OAuth separator label',
+      default: 'or continue with password',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/public.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from 'bun:test';
 
+import { authScreenMeta } from './authScreenMeta';
 import { forgotPasswordFormMeta } from './forgotPasswordFormMeta';
 import { oauthProviderButtonMeta } from './oauthProviderButtonMeta';
 import { oauthProviderListMeta } from './oauthProviderListMeta';
@@ -8,6 +9,7 @@ import { signInFormMeta } from './signInFormMeta';
 import { signUpFormMeta } from './signUpFormMeta';
 
 const AUTH_MANIFEST_ELEMENTS = {
+  AuthScreen: authScreenMeta,
   ForgotPasswordForm: forgotPasswordFormMeta,
   OAuthProviderButton: oauthProviderButtonMeta,
   OAuthProviderList: oauthProviderListMeta,
@@ -25,6 +27,10 @@ test('auth solutions are direct manifest leaf nodes with authoring schemas', ()
 });
 
 test('auth solution events expose their actionable boundaries', () => {
+  expect(authScreenMeta.events.modeChange.eventType).toBe('authScreen.modeChange');
+  expect(authScreenMeta.events.oauthProviderPress.payloadFields).toEqual([
+    { path: 'providerId', type: 'string', label: 'Provider ID' },
+  ]);
   expect(signInFormMeta.events.submit.payloadFields).toContainEqual({
     path: 'secret',
     type: 'string',

package/src/features/auth/public.ts

@@ -1,6 +1,8 @@
 export type {
   AuthFormBaseProps,
   AuthIdentifierKind,
+  AuthScreenMode,
+  AuthScreenProps,
   ForgotPasswordFormProps,
   ForgotPasswordFormValues,
   OAuthProviderButtonProps,
@@ -16,6 +18,7 @@ export type {
   SignUpFormProps,
   SignUpFormValues,
 } from '../../types/auth';
+export { AuthScreen } from './adapters/inbound/AuthScreen';
 export { ForgotPasswordForm } from './adapters/inbound/ForgotPasswordForm';
 export { OAuthProviderButton } from './adapters/inbound/OAuthProviderButton';
 export { OAuthProviderList } from './adapters/inbound/OAuthProviderList';

package/src/features/registry/ZORA_COMPONENT_REGISTRY.ts

@@ -6,6 +6,7 @@ import { Accordion, AccordionItem } from '../accordion/public';
 import { ActivityIndicator } from '../activity-indicator/public';
 import { AppBar } from '../app-bar/public';
 import {
+  AuthScreen,
   ForgotPasswordForm,
   OAuthProviderButton,
   OAuthProviderList,
@@ -175,6 +176,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   AppShell,
   Screen,
   ScreenSection,
+  AuthScreen,
   ForgotPasswordForm,
   OAuthProviderButton,
   OAuthProviderList,

package/src/features/registry/componentMeta.test.ts

@@ -166,6 +166,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
   test('direct manifest node leaf/container rules', () => {
     const expectedLeafNodes = new Set([
       'ActivityIndicator',
+      'AuthScreen',
       'ForgotPasswordForm',
       'OAuthProviderButton',
       'OAuthProviderList',

package/src/features/registry/componentMeta.ts

@@ -3,6 +3,7 @@ import { accordionItemMeta } from '../accordion/accordionItemMeta';
 import { accordionMeta } from '../accordion/accordionMeta';
 import { activityIndicatorMeta } from '../activity-indicator/activityIndicatorMeta';
 import { appBarMeta } from '../app-bar/appBarMeta';
+import { authScreenMeta } from '../auth/authScreenMeta';
 import { forgotPasswordFormMeta } from '../auth/forgotPasswordFormMeta';
 import { oauthProviderButtonMeta } from '../auth/oauthProviderButtonMeta';
 import { oauthProviderListMeta } from '../auth/oauthProviderListMeta';
@@ -178,6 +179,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   AppShell: appShellMeta,
   Screen: screenMeta,
   ScreenSection: screenSectionMeta,
+  AuthScreen: authScreenMeta,
   ForgotPasswordForm: forgotPasswordFormMeta,
   OAuthProviderButton: oauthProviderButtonMeta,
   OAuthProviderList: oauthProviderListMeta,

package/src/features/tree-view/adapters/inbound/TreeItem.tsx

@@ -54,11 +54,12 @@ function TreeItemInner<TId extends string = string>({
       });
     }
 
+    const nodeIcon = isExpanded ? (node.expandedIcon ?? node.icon) : node.icon;
     const listItemProps = {
       title: node.label,
       leading:
-        expansionIndicator === 'folder' || node.icon === undefined ? undefined : (
-          <Icon {...node.icon} size="s" />
+        expansionIndicator === 'folder' || nodeIcon === undefined ? undefined : (
+          <Icon {...nodeIcon} size={12} />
         ),
       meta: node.meta,
       disabled: node.disabled,

package/src/features/tree-view/adapters/inbound/web-artifact/TreeItemRow.tsx

@@ -17,7 +17,13 @@ export function TreeItemRow<TId extends string>(props: TreeItemRowProps<TId>) {
     selected,
     expanded,
     hasChildren,
-  }) ?? <TreeItemDefaultContent node={node} showIcon={props.expansionIndicator === 'chevron'} />;
+  }) ?? (
+    <TreeItemDefaultContent
+      expanded={expanded}
+      node={node}
+      showIcon={props.expansionIndicator === 'chevron'}
+    />
+  );
 
   return (
     <>
@@ -61,17 +67,20 @@ interface TreeItemRowProps<TId extends string> {
 
 /*** Render the default browser tree-row label, icon, and metadata. */
 function TreeItemDefaultContent<TId extends string>({
+  expanded,
   node,
   showIcon,
 }: {
+  readonly expanded: boolean;
   readonly node: TreeItemNode<TId>;
   readonly showIcon: boolean;
 }) {
+  const icon = expanded ? (node.expandedIcon ?? node.icon) : node.icon;
   return (
     <>
-      {!showIcon || node.icon === undefined ? null : (
+      {!showIcon || icon === undefined ? null : (
         <span aria-hidden="true" style={ICON_STYLE}>
-          {node.icon}
+          {icon}
         </span>
       )}
       <span style={LABEL_STYLE}>{node.label}</span>

package/src/features/tree-view/adapters/inbound/web-artifact/TreeView.test.tsx

@@ -221,3 +221,22 @@ test('supports folder/file indicators without duplicating supplied row icons', (
   expect(markup).not.toContain('duplicate-icon');
   expect(markup.match(/<svg/g)?.length).toBe(2);
 });
+
+test('renders the expanded node icon while a chevron node is open', () => {
+  const node = {
+    id: 'src',
+    label: 'src',
+    icon: <span>closed-folder</span>,
+    expandedIcon: <span>open-folder</span>,
+    children: [{ id: 'file', label: 'file.ts' }],
+  };
+  const collapsed = renderToStaticMarkup(<TreeView expansionIndicator="chevron" nodes={[node]} />);
+  const expanded = renderToStaticMarkup(
+    <TreeView expansionIndicator="chevron" defaultExpandedIds={['src']} nodes={[node]} />,
+  );
+
+  expect(collapsed).toContain('closed-folder');
+  expect(collapsed).not.toContain('open-folder');
+  expect(expanded).toContain('open-folder');
+  expect(expanded).not.toContain('closed-folder');
+});

package/src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx

@@ -8,6 +8,7 @@ export interface TreeItemNode<TId extends string = string> {
   readonly id: TId;
   readonly label: React.ReactNode;
   readonly icon?: React.ReactNode;
+  readonly expandedIcon?: React.ReactNode;
   readonly children?: readonly TreeItemNode<TId>[];
   readonly disabled?: boolean;
   readonly meta?: React.ReactNode;

package/src/index.ts

@@ -16,6 +16,8 @@ export { AppBar } from './features/app-bar/public';
 export type {
   AuthFormBaseProps,
   AuthIdentifierKind,
+  AuthScreenMode,
+  AuthScreenProps,
   ForgotPasswordFormProps,
   ForgotPasswordFormValues,
   OAuthProviderButtonProps,
@@ -32,6 +34,7 @@ export type {
   SignUpFormValues,
 } from './features/auth/public';
 export {
+  AuthScreen,
   DEFAULT_OAUTH_PROVIDER_ICONS,
   ForgotPasswordForm,
   OAuthProviderButton,

package/src/showcaseCoverage.test.ts

@@ -63,6 +63,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
   features: ['Uploader', 'BottomSheet', 'FlatList', 'SectionList'],
   layouts: ['AppShell', 'Screen', 'ScreenSection', 'ScrollView'],
   patterns: [
+    'AuthScreen',
     'ForgotPasswordForm',
     'OtpForm',
     'SignInForm',

package/src/types/auth.ts

@@ -7,6 +7,27 @@ import type { FormFieldConfig, FormValues } from './form';
 
 export type AuthIdentifierKind = 'email' | 'phone' | 'username';
 
+export type AuthScreenMode = 'signIn' | 'signUp';
+
+export interface AuthScreenProps extends ZoraBaseProps {
+  authMode: AuthScreenMode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  info?: React.ReactNode;
+  error?: React.ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  identifiers?: readonly AuthIdentifierKind[];
+  identifierLabel?: React.ReactNode;
+  signUpFields?: readonly SignUpFormField[];
+  oauthProviders?: readonly OAuthProviderItem[];
+  oauthSeparatorLabel?: React.ReactNode;
+  onModeChange?: (mode: AuthScreenMode) => void | Promise<void>;
+  onOAuthProviderPress?: (providerId: string) => void | Promise<void>;
+  onSignInSubmit?: (values: SignInFormValues) => void | Promise<void>;
+  onSignUpSubmit?: (values: SignUpFormValues) => void | Promise<void>;
+}
+
 export interface AuthFormBaseProps extends ZoraBaseProps {
   loading?: boolean;
   disabled?: boolean;

package/src/types/tree-view.ts

@@ -8,6 +8,7 @@ export interface TreeItemNode<TId extends string = string> {
   id: TId;
   label: ReactNode;
   icon?: ButtonIconSpec;
+  expandedIcon?: ButtonIconSpec;
   children?: readonly TreeItemNode<TId>[];
   disabled?: boolean;
   meta?: ReactNode;

package/web-dist/chunks/{Accordion-q165k3az.js → Accordion-2ak69ntj.js}

@@ -4,7 +4,7 @@ import {
 } from "./Accordion-7hn324r1.js";
 import {
   Button2
-} from "./Accordion-dp638q63.js";
+} from "./Accordion-yms7x22j.js";
 import {
   withZoraThemeScope
 } from "./Accordion-13y3zx87.js";
@@ -13,13 +13,13 @@ import {
 } from "./Accordion-01e56hb5.js";
 import {
   Card2
-} from "./Accordion-fm3jxs1f.js";
+} from "./Accordion-z1trs7s1.js";
 import {
-  Text2
-} from "./Accordion-rx2gzadh.js";
+  Text3
+} from "./Accordion-46vwm9xv.js";
 import {
   Badge2
-} from "./Accordion-x13vca75.js";
+} from "./Accordion-cqgbx1pw.js";
 import {
   useZoraTheme2
 } from "./Accordion-7zfskq1s.js";
@@ -82,7 +82,7 @@ function CameraPermissionViewInner({
     children: /* @__PURE__ */ jsxs(View2, {
       gap: "m",
       children: [
-        /* @__PURE__ */ jsxs(Text2, {
+        /* @__PURE__ */ jsxs(Text3, {
           emphasis: "muted",
           variant: "bodySmall",
           children: [
@@ -167,13 +167,13 @@ function ScanOverlayInner({
         /* @__PURE__ */ jsxs2(View2, {
           gap: "xs",
           children: [
-            /* @__PURE__ */ jsx2(Text2, {
+            /* @__PURE__ */ jsx2(Text3, {
               align: "center",
               variant: "label",
               weight: "semiBold",
               children: title
             }),
-            /* @__PURE__ */ jsx2(Text2, {
+            /* @__PURE__ */ jsx2(Text3, {
               align: "center",
               emphasis: "muted",
               variant: "bodySmall",
@@ -304,7 +304,7 @@ function BarcodeScannerViewInner({
         children ? /* @__PURE__ */ jsx3(View2, {
           children
         }) : null,
-        /* @__PURE__ */ jsx3(Text2, {
+        /* @__PURE__ */ jsx3(Text3, {
           emphasis: "muted",
           variant: "caption",
           children: "Native scanning belongs to an app adapter such as expo-camera. ZORA owns this visible scanner surface."

package/web-dist/chunks/{Accordion-rx2gzadh.js → Accordion-46vwm9xv.js}

@@ -577,7 +577,7 @@ var textThemeRecipeMeta = {
 
 // src/features/typography/adapters/inbound/Text.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Text2 = withZoraThemeScope(TextInner);
+var Text3 = withZoraThemeScope(TextInner);
 var textLayoutStyle = {
   flexShrink: 1,
   maxWidth: "100%",
@@ -656,4 +656,4 @@ function TextInner({
     children: content
   });
 }
-export { Heading2, Text2 };
+export { Heading2, Text3 };

package/web-dist/chunks/{Accordion-xf8cj8z4.js → Accordion-4r9a9qny.js}

@@ -24,8 +24,8 @@ import {
 } from "./Accordion-01e56hb5.js";
 import {
   Heading2,
-  Text2
-} from "./Accordion-rx2gzadh.js";
+  Text3
+} from "./Accordion-46vwm9xv.js";
 import {
   resolveOverlayAnimation
 } from "./Accordion-2d8xn32m.js";
@@ -158,7 +158,7 @@ function DialogInner({
                 level: 3,
                 children: title
               }) : null,
-              description !== undefined ? /* @__PURE__ */ jsx2(Text2, {
+              description !== undefined ? /* @__PURE__ */ jsx2(Text3, {
                 emphasis: "muted",
                 variant: "bodySmall",
                 children: description