@luxfi/ui 7.4.10 → 7.4.12

package/src/collapsible.tsx

@@ -1,12 +1,20 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
+import { Collapsible, YStack } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
-
 import type { LinkProps } from './link';
 import { Link } from './link';
 
-// Inline useUpdateEffect (effect that skips first mount)
+// Two disclosure shapes on gui's Collapsible: one that hides a block of detail
+// behind a "View details" link, one that cuts a long list down to its first few
+// rows.
+//
+// The trigger is the `Link` itself rather than a wrapping `Collapsible.Trigger`.
+// gui's Trigger renders its OWN element — it has no `asChild` — so wrapping
+// would nest a button around an anchor, which is invalid HTML and swallows the
+// link's own keyboard behaviour. The state is already controlled here, so the
+// only thing the wrapper contributed was `aria-expanded`, and that is a prop.
+
+/** An effect that skips the first mount. */
 function useUpdateEffect(effect: React.EffectCallback, deps: React.DependencyList): void {
   const isFirstMount = React.useRef(true);
   React.useEffect(() => {
@@ -19,12 +27,8 @@ function useUpdateEffect(effect: React.EffectCallback, deps: React.DependencyLis
   }, deps);
 }
 
-// Inline scroll-to helper (replaces react-scroll dependency)
 function scrollToElement(id: string): void {
-  const el = document.getElementById(id);
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 
 export interface CollapsibleDetailsProps extends LinkProps {
@@ -38,48 +42,49 @@ export interface CollapsibleDetailsProps extends LinkProps {
 const CUT_ID = 'CollapsibleDetails';
 
 export const CollapsibleDetails = (props: CollapsibleDetailsProps) => {
-
-  const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
+  const {
+    children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false,
+    text: textProp, loading, noScroll, ...rest
+  } = props;
 
   const [ isExpanded, setIsExpanded ] = React.useState(isExpandedProp);
 
   const handleClick = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
     setIsExpanded((flag) => !flag);
-    if (!noScroll) {
-      scrollToElement(id);
-    }
+    if (!noScroll) scrollToElement(id);
     onClick?.(event);
   }, [ id, noScroll, onClick ]);
 
   useUpdateEffect(() => {
     setIsExpanded(isExpandedProp);
-    if (isExpandedProp && !noScroll) {
-      scrollToElement(id);
-    }
+    if (isExpandedProp && !noScroll) scrollToElement(id);
   }, [ isExpandedProp, id, noScroll ]);
 
   const text = isExpanded ? (textProp?.[1] ?? 'Hide details') : (textProp?.[0] ?? 'View details');
 
   return (
-    <Collapsible.Root open={ isExpanded }>
-      <Collapsible.Trigger asChild>
-        <Link
-          className="text-sm underline decoration-dashed w-fit"
-          onClick={ handleClick }
-          loading={ loading }
-          { ...rest }
-        >
-          <span id={ id }>{ text }</span>
-        </Link>
-      </Collapsible.Trigger>
+    <Collapsible open={ isExpanded } onOpenChange={ setIsExpanded }>
+      <Link
+        className="text-sm underline decoration-dashed w-fit"
+        aria-expanded={ isExpanded }
+        onClick={ handleClick }
+        loading={ loading }
+        { ...rest }
+      >
+        <span id={ id }>{ text }</span>
+      </Link>
       <Collapsible.Content>
         { children }
       </Collapsible.Content>
-    </Collapsible.Root>
+    </Collapsible>
   );
 };
 
-interface CollapsibleListProps<T> extends React.ComponentPropsWithoutRef<'div'> {
+// `items` and `text` are this component's own nouns — the rows, and the pair of
+// trigger labels. On gui they are the `alignItems` / `textAlign` shorthands.
+// Ours win; the shorthands stay reachable under their full names.
+interface CollapsibleListProps<T>
+  extends Omit<React.ComponentProps<typeof YStack>, 'children' | 'text' | 'items'> {
   items: Array<T>;
   renderItem: (item: T, index: number) => React.ReactNode;
   triggerProps?: LinkProps;
@@ -88,10 +93,13 @@ interface CollapsibleListProps<T> extends React.ComponentPropsWithoutRef<'div'>
   defaultExpanded?: boolean;
 }
 
-export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
-  const CUT_LENGTH = 3;
+const CUT_LENGTH = 3;
 
-  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
+export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
+  const {
+    items, renderItem, triggerProps, cutLength = CUT_LENGTH,
+    text: textProp, defaultExpanded = false, ...rest
+  } = props;
 
   const [ isExpanded, setIsExpanded ] = React.useState(defaultExpanded);
 
@@ -99,28 +107,23 @@ export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
     setIsExpanded(defaultExpanded);
   }, [ defaultExpanded ]);
 
-  const handleToggle = React.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-  }, []);
+  const handleToggle = React.useCallback(() => setIsExpanded((flag) => !flag), []);
 
   const text = isExpanded ? (textProp?.[1] ?? 'Hide') : (textProp?.[0] ?? 'Show all');
 
   return (
-    <Collapsible.Root open={ isExpanded }>
-      <div className={ cn('flex flex-col w-full', className) } { ...rest }>
-        { items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
-        { items.length > cutLength && (
-          <Collapsible.Trigger asChild>
-            <Link
-              className="text-sm underline decoration-dashed w-fit min-w-0"
-              onClick={ handleToggle }
-              { ...triggerProps }
-            >
-              { text }
-            </Link>
-          </Collapsible.Trigger>
-        ) }
-      </div>
-    </Collapsible.Root>
+    <YStack width="100%" { ...rest }>
+      { items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
+      { items.length > cutLength && (
+        <Link
+          className="text-sm underline decoration-dashed w-fit min-w-0"
+          aria-expanded={ isExpanded }
+          onClick={ handleToggle }
+          { ...triggerProps }
+        >
+          { text }
+        </Link>
+      ) }
+    </YStack>
   );
 };

package/src/drawer.tsx

@@ -1,11 +1,9 @@
-import { Sheet as GuiSheet } from '@hanzo/gui';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import { Dialog, Sheet as GuiSheet, View, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { useIsNarrow } from './use-narrow';
-import { cn } from './utils';
-
 import { CloseButton } from './close-button';
+import { ink } from './ink';
+import { useIsNarrow } from './use-narrow';
 
 // A drawer is a side panel on a wide screen and a bottom sheet on a phone. Below
 // `NARROW_PX` the content is presented by gui's Sheet — draggable, with
@@ -13,6 +11,16 @@ import { CloseButton } from './close-button';
 // `position: fixed` panel with a slide-in keyframe cannot fake. Same components,
 // same props, at every call site. The breakpoint itself lives in ./use-narrow,
 // so "is this phone-sized?" has one answer across the package.
+//
+// Both presentations now come from the same engine: the wide panel is gui's
+// Dialog where it used to be Radix's. That is the whole reason the root has to
+// own its open state — it did already, because the Sheet lives outside the
+// dialog tree and needs the same state, and now both sides read it.
+//
+// The slide is `enterStyle` / `exitStyle` on the content, driven by the CSS
+// animation driver that lux.config feeds the engine. It is not decoration: the
+// panel is `position: fixed` at the edge it flies in from, so without the
+// transform it appears instantly, fully formed, which reads as a repaint bug.
 
 // ─── DrawerRoot ─────────────────────────────────────────────────
 
@@ -21,46 +29,44 @@ export interface DrawerRootProps {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (details: { open: boolean }) => void;
-  placement?: 'left' | 'right' | 'top' | 'bottom';
+  placement?: Placement;
   initialFocusEl?: (() => HTMLElement | null) | React.RefObject<HTMLElement>;
   lazyMount?: boolean;
   unmountOnExit?: boolean;
   modal?: boolean;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  size?: Size;
 }
 
-const DrawerPlacementContext = React.createContext<string>('right');
-const DrawerSizeContext = React.createContext<string>('md');
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+const DrawerPlacementContext = React.createContext<Placement>('right');
+const DrawerSizeContext = React.createContext<Size>('md');
 
 interface DrawerStateValue {
   readonly open: boolean;
   readonly setOpen: (next: boolean) => void;
   readonly modal: boolean;
+  readonly narrow: boolean;
 }
 
 const DrawerStateContext = React.createContext<DrawerStateValue>({
   open: false,
   setOpen: () => { /* noop */ },
   modal: true,
+  narrow: false,
 });
 
 export const DrawerRoot = (props: DrawerRootProps) => {
   const {
-    children,
-    open,
-    defaultOpen,
-    onOpenChange,
-    placement = 'right',
-    modal = true,
-    size = 'md',
+    children, open, defaultOpen, onOpenChange,
+    placement = 'right', modal = true, size = 'md',
   } = props;
 
-  // The root owns the open state (controllable) rather than leaving it inside
-  // Radix, because the phone presentation is a gui Sheet that lives outside the
-  // dialog tree and needs the same state.
   const [ uncontrolled, setUncontrolled ] = React.useState(defaultOpen ?? false);
   const isControlled = open !== undefined;
   const isOpen = isControlled ? open : uncontrolled;
+  const narrow = useIsNarrow();
 
   const setOpen = React.useCallback((nextOpen: boolean) => {
     if (!isControlled) setUncontrolled(nextOpen);
@@ -68,21 +74,26 @@ export const DrawerRoot = (props: DrawerRootProps) => {
   }, [ isControlled, onOpenChange ]);
 
   const state = React.useMemo(
-    () => ({ open: isOpen, setOpen, modal }),
-    [ isOpen, setOpen, modal ],
+    () => ({ open: isOpen, setOpen, modal, narrow }),
+    [ isOpen, setOpen, modal, narrow ],
   );
 
   return (
     <DrawerPlacementContext.Provider value={ placement }>
       <DrawerSizeContext.Provider value={ size }>
         <DrawerStateContext.Provider value={ state }>
-          <RadixDialog.Root
-            open={ isOpen }
-            onOpenChange={ setOpen }
-            modal={ modal }
-          >
-            { children }
-          </RadixDialog.Root>
+          { /* WHICH presentation is one decision, and it is made here.
+               A gui Sheet inside a gui Dialog is not a sheet in a dialog: the
+               Dialog publishes a sheet controller and adopts any Sheet beneath
+               it, so the phone panel stopped rendering entirely the moment the
+               wide path became a gui Dialog. On a phone there is no dialog —
+               the Sheet IS the presentation — so no Dialog is mounted at all,
+               and the trigger below reads the same flag. */ }
+          { narrow ? children : (
+            <Dialog open={ isOpen } onOpenChange={ setOpen } modal={ modal }>
+              { children }
+            </Dialog>
+          ) }
         </DrawerStateContext.Provider>
       </DrawerSizeContext.Provider>
     </DrawerPlacementContext.Provider>
@@ -98,45 +109,35 @@ export interface DrawerContentProps extends React.ComponentPropsWithoutRef<'div'
   backdrop?: boolean;
 }
 
-const PLACEMENT_CLASSES: Record<string, string> = {
-  right: [
-    'inset-y-0 right-0',
-    'data-[state=open]:animate-in data-[state=open]:slide-in-from-right',
-    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right',
-  ].join(' '),
-  left: [
-    'inset-y-0 left-0',
-    'data-[state=open]:animate-in data-[state=open]:slide-in-from-left',
-    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left',
-  ].join(' '),
-  top: [
-    'inset-x-0 top-0',
-    'data-[state=open]:animate-in data-[state=open]:slide-in-from-top',
-    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top',
-  ].join(' '),
-  bottom: [
-    'inset-x-0 bottom-0',
-    'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom',
-    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom',
-  ].join(' '),
+/** Where the panel is pinned, and which way it flies in from. */
+const ANCHOR: Record<Placement, Record<string, unknown>> = {
+  right: { top: 0, bottom: 0, right: 0, enterStyle: { x: 24, opacity: 0 }, exitStyle: { x: 24, opacity: 0 } },
+  left: { top: 0, bottom: 0, left: 0, enterStyle: { x: -24, opacity: 0 }, exitStyle: { x: -24, opacity: 0 } },
+  top: { left: 0, right: 0, top: 0, enterStyle: { y: -24, opacity: 0 }, exitStyle: { y: -24, opacity: 0 } },
+  bottom: { left: 0, right: 0, bottom: 0, enterStyle: { y: 24, opacity: 0 }, exitStyle: { y: 24, opacity: 0 } },
 };
 
-const SIZE_CLASSES: Record<string, Record<string, string>> = {
-  right: { xs: 'w-60', sm: 'w-80', md: 'w-96', lg: 'w-[480px]', xl: 'w-[640px]', full: 'w-screen' },
-  left: { xs: 'w-60', sm: 'w-80', md: 'w-96', lg: 'w-[480px]', xl: 'w-[640px]', full: 'w-screen' },
-  top: { xs: 'h-40', sm: 'h-60', md: 'h-80', lg: 'h-96', xl: 'h-[480px]', full: 'h-screen' },
-  bottom: { xs: 'h-40', sm: 'h-60', md: 'h-80', lg: 'h-96', xl: 'h-[480px]', full: 'h-screen' },
+const ACROSS: Record<Size, number | string> = {
+  xs: 240, sm: 320, md: 384, lg: 480, xl: 640, full: '100%',
 };
 
+/** The panel's measured axis: width for a side panel, height for a top/bottom one. */
+const extent = (placement: Placement, size: Size): Record<string, unknown> => (
+  placement === 'left' || placement === 'right' ?
+    { width: ACROSS[size], maxWidth: '100%' } :
+    { height: ACROSS[size], maxHeight: '100%' }
+);
+
+const SCRIM = 'rgba(0,0,0,0.5)';
+
 export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
   function DrawerContent(props, ref) {
-    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
+    const { children, portalled = true, portalRef: _portalRef, offset: _offset, backdrop = true, ...rest } = props;
     const placement = React.useContext(DrawerPlacementContext);
     const size = React.useContext(DrawerSizeContext);
-    const { open, setOpen, modal } = React.useContext(DrawerStateContext);
-    const isNarrow = useIsNarrow();
+    const { open, setOpen, modal, narrow } = React.useContext(DrawerStateContext);
 
-    if (isNarrow) {
+    if (narrow) {
       return (
         <GuiSheet
           open={ open }
@@ -152,7 +153,7 @@ export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps
               transition="lazy"
               enterStyle={{ opacity: 0 }}
               exitStyle={{ opacity: 0 }}
-              className="bg-black/50"
+              backgroundColor={ SCRIM as never }
             />
           ) }
           <GuiSheet.Handle/>
@@ -160,10 +161,11 @@ export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps
                Chakra contract hands us has nothing to attach to here. */ }
           <GuiSheet.Frame
             unstyled
-            className={ cn(
-              'flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]',
-              className,
-            ) }
+            flexDirection="column"
+            borderTopLeftRadius={ 16 }
+            borderTopRightRadius={ 16 }
+            backgroundColor={ 'var(--color-drawer-bg)' as never }
+            shadowColor={ 'var(--shadow-drawer)' as never }
             { ...(rest as object) }
           >
             { children }
@@ -175,85 +177,91 @@ export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps
     const content = (
       <>
         { backdrop && (
-          <RadixDialog.Overlay
-            className={ cn(
-              'fixed inset-0 z-50 bg-black/50',
-              'data-[state=open]:animate-in data-[state=open]:fade-in-0',
-              'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
-            ) }
+          <Dialog.Overlay
+            key="overlay"
+            position="fixed"
+            top={ 0 }
+            right={ 0 }
+            bottom={ 0 }
+            left={ 0 }
+            zIndex={ 50 }
+            backgroundColor={ SCRIM as never }
+            transition="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
           />
         ) }
-        <RadixDialog.Content
-          ref={ ref }
-          className={ cn(
-            'fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300',
-            PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
-            SIZE_CLASSES[placement]?.[size] ?? SIZE_CLASSES.right?.md,
-            className,
-          ) }
-          { ...rest }
+        <Dialog.Content
+          key="content"
+          ref={ ref as never }
+          unstyled
+          position="fixed"
+          zIndex={ 50 }
+          flexDirection="column"
+          backgroundColor={ 'var(--color-drawer-bg)' as never }
+          transition="medium"
+          { ...ANCHOR[placement] }
+          { ...extent(placement, size) }
+          { ...(rest as object) }
         >
           { children }
-        </RadixDialog.Content>
+        </Dialog.Content>
       </>
     );
 
-    if (portalled) {
-      return (
-        <RadixDialog.Portal container={ portalRef?.current ?? undefined }>
-          { content }
-        </RadixDialog.Portal>
-      );
-    }
-
-    return content;
+    return portalled ? <Dialog.Portal>{ content }</Dialog.Portal> : content;
   },
 );
 
-// ─── DrawerCloseTrigger ─────────────────────────────────────────
+// ─── Triggers ───────────────────────────────────────────────────
 
 export const DrawerCloseTrigger = React.forwardRef<
   HTMLButtonElement,
   React.ComponentPropsWithoutRef<'button'>
 >(function DrawerCloseTrigger(props, ref) {
   return (
-    <RadixDialog.Close asChild>
-      <CloseButton
-        ref={ ref }
-        className={ cn('absolute top-7 right-5', props.className) }
-        { ...props }
-      />
-    </RadixDialog.Close>
+    // Placement belongs to the surrounding box, not to the button: CloseButton
+    // is a fixed 20px control and has no opinion about where it sits.
+    <View position="absolute" top={ 28 } right={ 20 } zIndex={ 1 }>
+      <Dialog.Close asChild>
+        <CloseButton ref={ ref } { ...props }/>
+      </Dialog.Close>
+    </View>
   );
 });
 
-// ─── DrawerTrigger ──────────────────────────────────────────────
+export const DrawerTrigger = ({ asChild = true, children, ...rest }: React.ComponentProps<typeof Dialog.Trigger>) => {
+  const { setOpen, narrow } = React.useContext(DrawerStateContext);
+
+  // On a phone there is no Dialog above this, so there is no Dialog.Trigger to
+  // be: the child opens the Sheet directly.
+  if (narrow) {
+    return React.isValidElement(children) ?
+      React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, { onClick: () => setOpen(true) }) :
+      <>{ children }</>;
+  }
 
-export const DrawerTrigger = (props: React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger>) => {
-  const { asChild = true, ...rest } = props;
-  return <RadixDialog.Trigger asChild={ asChild } { ...rest }/>;
+  return <Dialog.Trigger asChild={ asChild } { ...rest }>{ children }</Dialog.Trigger>;
 };
 
 // ─── Sub-components ─────────────────────────────────────────────
 
-export const DrawerHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
-  function DrawerHeader({ className, ...props }, ref) {
-    return <div ref={ ref } className={ cn('flex flex-col gap-1.5 p-6 pb-0', className) } { ...props }/>;
-  },
+// These three take caller-authored content, so a bare string is the normal
+// case and has to be given a host — a View cannot lay one out.
+export const DrawerHeader = ({ children, ...props }: React.ComponentProps<typeof YStack>) => (
+  <YStack gap={ 6 } padding={ 24 } paddingBottom={ 0 } { ...props }>{ ink(children) }</YStack>
 );
 
-export const DrawerBody = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
-  function DrawerBody({ className, ...props }, ref) {
-    return <div ref={ ref } className={ cn('flex-1 overflow-auto p-6', className) } { ...props }/>;
-  },
+export const DrawerBody = ({ children, ...props }: React.ComponentProps<typeof YStack>) => (
+  <YStack flex={ 1 } overflow="scroll" padding={ 24 } { ...props }>{ ink(children) }</YStack>
 );
 
-export const DrawerFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
-  function DrawerFooter({ className, ...props }, ref) {
-    return <div ref={ ref } className={ cn('flex items-center justify-end gap-2 p-6 pt-0', className) } { ...props }/>;
-  },
+export const DrawerFooter = ({ children, ...props }: React.ComponentProps<typeof XStack>) => (
+  <XStack alignItems="center" justifyContent="flex-end" gap={ 8 } padding={ 24 } paddingTop={ 0 } { ...props }>
+    { ink(children) }
+  </XStack>
 );
 
-export const DrawerTitle = RadixDialog.Title;
-export const DrawerDescription = RadixDialog.Description;
-export const DrawerActionTrigger = RadixDialog.Close;
+export const DrawerTitle = Dialog.Title;
+export const DrawerDescription = Dialog.Description;
+export const DrawerActionTrigger = Dialog.Close;

package/src/empty-state.tsx

@@ -1,9 +1,8 @@
+import { Text, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // Inline constants
-const apos = '\u2019'; // right single quotation mark (typographic apostrophe)
+const apos = '’'; // right single quotation mark (typographic apostrophe)
 
 function upperFirst(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -23,6 +22,8 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   icon?: React.ReactNode;
 }
 
+const MUTED = 'var(--color-text-secondary)' as never;
+
 export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
   function EmptyState(props, ref) {
     const { title, description, term, type = 'query', icon, children, className, ...rest } = props;
@@ -70,28 +71,31 @@ export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
     })();
 
     return (
-      <div
-        ref={ ref }
-        className={ cn('flex items-center justify-center py-10', className) }
-        { ...rest }
+      <XStack
+        ref={ ref as never }
+        alignItems="center"
+        justifyContent="center"
+        paddingVertical={ 40 }
+        className={ className }
+        { ...(rest as object) }
       >
-        <div className="flex flex-col items-center gap-5">
+        <YStack alignItems="center" gap={ 20 }>
           { iconContent && (
-            <div className="flex items-center justify-center">{ iconContent }</div>
+            <XStack alignItems="center" justifyContent="center">{ iconContent }</XStack>
           ) }
           { descriptionContent ? (
-            <div className="flex flex-col items-center gap-2 text-center">
-              <span className="text-lg font-semibold text-text-secondary">{ titleContent }</span>
-              <span className="text-sm text-text-secondary">
+            <YStack alignItems="center" gap={ 8 }>
+              <Text fontSize={ 18 } fontWeight="600" textAlign="center" color={ MUTED }>{ titleContent }</Text>
+              <Text fontSize={ 14 } textAlign="center" color={ MUTED }>
                 { descriptionContent }
-              </span>
-            </div>
+              </Text>
+            </YStack>
           ) : (
-            <span className="text-lg font-semibold text-text-secondary">{ titleContent }</span>
+            <Text fontSize={ 18 } fontWeight="600" textAlign="center" color={ MUTED }>{ titleContent }</Text>
           ) }
           { children }
-        </div>
-      </div>
+        </YStack>
+      </XStack>
     );
   },
 );