@luxfi/ui 7.4.11 → 7.4.12

package/src/strategy-builder.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, View, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -163,6 +162,21 @@ const STRATEGY_PRESETS: StrategyPreset[] = [
   },
 ];
 
+// ---------------------------------------------------------------------------
+// Shared control shape — same tokens input.tsx's native text control uses.
+// ---------------------------------------------------------------------------
+
+const MONO = { fontFamily: 'monospace' } as never;
+
+const CONTROL = {
+  backgroundColor: 'var(--color-input-bg)',
+  borderWidth: 1,
+  borderColor: 'var(--color-input-border)',
+  color: 'var(--color-input-fg)',
+  outlineWidth: 0,
+  focusStyle: { borderColor: 'var(--color-input-border-focus)' },
+} as const;
+
 // ---------------------------------------------------------------------------
 // LegRow
 // ---------------------------------------------------------------------------
@@ -183,100 +197,148 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
   };
 
   return (
-    <div className="flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5">
-      <span className="text-[10px] font-mono text-zinc-500 w-4 shrink-0">
-        {index + 1}
-      </span>
+    <XStack
+      alignItems="center"
+      gap={ 8 }
+      borderRadius={ 6 }
+      backgroundColor={ 'var(--color-tag-subtle-bg)' as never }
+      paddingHorizontal={ 8 }
+      paddingVertical={ 6 }
+    >
+      <Text fontSize={ 10 } style={ MONO } flexShrink={ 0 } width={ 16 } color={ 'var(--color-text-secondary)' as never }>
+        { index + 1 }
+      </Text>
 
       {/* Action */}
-      <button
-        type="button"
-        className={cn(
-          'px-2 py-0.5 rounded text-xs font-semibold transition-colors',
-          leg.action === 'buy'
-            ? 'bg-emerald-900/60 text-emerald-400'
-            : 'bg-red-900/60 text-red-400',
-        )}
-        onClick={() => update({ action: leg.action === 'buy' ? 'sell' : 'buy' })}
+      <XStack
+        unstyled
+        render={ <button type="button"/> }
+        onClick={ () => update({ action: leg.action === 'buy' ? 'sell' : 'buy' }) }
+        paddingHorizontal={ 8 }
+        paddingVertical={ 2 }
+        borderRadius={ 4 }
+        borderWidth={ 0 }
+        cursor="pointer"
+        transition="quick"
+        backgroundColor={ (leg.action === 'buy'
+          ? 'color-mix(in srgb, var(--color-status-good) 20%, transparent)'
+          : 'color-mix(in srgb, var(--color-status-bad) 20%, transparent)') as never }
       >
-        {leg.action === 'buy' ? 'BUY' : 'SELL'}
-      </button>
-
-      {/* Type */}
-      <button
-        type="button"
-        className={cn(
-          'px-2 py-0.5 rounded text-xs font-medium transition-colors',
-          // Call vs put is a rank difference, not a hue difference.
-          leg.type === 'call'
-            ? 'bg-[var(--secondary)] text-[var(--foreground)]'
-            : 'bg-[var(--muted)] text-[var(--muted-foreground)]',
-        )}
-        onClick={() => update({ type: leg.type === 'call' ? 'put' : 'call' })}
+        <Text fontSize={ 12 } fontWeight="600" color={ (leg.action === 'buy' ? 'var(--color-status-good)' : 'var(--color-status-bad)') as never }>
+          { leg.action === 'buy' ? 'BUY' : 'SELL' }
+        </Text>
+      </XStack>
+
+      {/* Type — call vs put is a rank difference, not a hue difference. */}
+      <XStack
+        unstyled
+        render={ <button type="button"/> }
+        onClick={ () => update({ type: leg.type === 'call' ? 'put' : 'call' }) }
+        paddingHorizontal={ 8 }
+        paddingVertical={ 2 }
+        borderRadius={ 4 }
+        borderWidth={ 0 }
+        cursor="pointer"
+        transition="quick"
+        backgroundColor={ (leg.type === 'call' ? 'var(--secondary)' : 'var(--muted)') as never }
       >
-        {leg.type === 'call' ? 'CALL' : 'PUT'}
-      </button>
+        <Text fontSize={ 12 } fontWeight="500" color={ (leg.type === 'call' ? 'var(--foreground)' : 'var(--muted-foreground)') as never }>
+          { leg.type === 'call' ? 'CALL' : 'PUT' }
+        </Text>
+      </XStack>
 
       {/* Strike */}
-      <select
-        value={leg.strike}
-        onChange={(e) => update({ strike: Number(e.target.value) })}
-        className="bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 min-w-[72px]"
+      <View
+        unstyled
+        render={ <select/> }
+        value={ leg.strike }
+        onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => update({ strike: Number(e.target.value) }) }
+        { ...CONTROL }
+        style={ MONO }
+        fontSize={ 12 }
+        borderRadius={ 4 }
+        paddingHorizontal={ 6 }
+        paddingVertical={ 2 }
+        minWidth={ 72 }
       >
-        {strikes.map((s) => (
-          <option key={s} value={s}>
-            {s.toFixed(2)}
+        { strikes.map((s) => (
+          <option key={ s } value={ s }>
+            { s.toFixed(2) }
           </option>
-        ))}
-      </select>
+        )) }
+      </View>
 
       {/* Expiration */}
-      <select
-        value={leg.expiration}
-        onChange={(e) => update({ expiration: e.target.value })}
-        className="bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-200 outline-none focus:border-zinc-500 min-w-[80px]"
+      <View
+        unstyled
+        render={ <select/> }
+        value={ leg.expiration }
+        onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => update({ expiration: e.target.value }) }
+        { ...CONTROL }
+        fontSize={ 12 }
+        borderRadius={ 4 }
+        paddingHorizontal={ 6 }
+        paddingVertical={ 2 }
+        minWidth={ 80 }
       >
-        {expirations.map((exp) => (
-          <option key={exp} value={exp}>
-            {exp}
+        { expirations.map((exp) => (
+          <option key={ exp } value={ exp }>
+            { exp }
           </option>
-        ))}
-      </select>
+        )) }
+      </View>
 
       {/* Quantity */}
-      <input
-        type="number"
-        min={1}
-        max={999}
-        value={leg.quantity}
-        onChange={(e) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) })}
-        className="bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 w-[48px] text-center"
+      <View
+        unstyled
+        render={ <input type="number"/> }
+        min={ 1 }
+        max={ 999 }
+        value={ leg.quantity }
+        onChange={ (e: React.ChangeEvent<HTMLInputElement>) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) }) }
+        { ...CONTROL }
+        style={ MONO }
+        fontSize={ 12 }
+        borderRadius={ 4 }
+        paddingHorizontal={ 6 }
+        paddingVertical={ 2 }
+        width={ 48 }
+        textAlign="center"
       />
 
       {/* Premium (read-only if provided) */}
-      {leg.premium !== undefined && (
-        <span className={cn(
-          'font-mono tabular-nums text-xs ml-auto',
-          leg.premium >= 0 ? 'text-emerald-400' : 'text-red-400',
-        )}>
-          {leg.premium >= 0 ? '+' : ''}{leg.premium.toFixed(2)}
-        </span>
-      )}
+      { leg.premium !== undefined && (
+        <Text
+          fontSize={ 12 }
+          style={ MONO }
+          fontVariant={ ['tabular-nums'] as never }
+          marginLeft="auto"
+          color={ (leg.premium >= 0 ? 'var(--color-status-good)' : 'var(--color-status-bad)') as never }
+        >
+          { leg.premium >= 0 ? '+' : '' }{ leg.premium.toFixed(2) }
+        </Text>
+      ) }
 
       {/* Remove */}
-      {removable && (
-        <button
-          type="button"
-          onClick={() => onRemove(index)}
-          className="ml-auto p-0.5 text-zinc-500 hover:text-red-400 transition-colors"
-          aria-label="Remove leg"
+      { removable && (
+        <XStack
+          unstyled
+          render={ <button type="button" aria-label="Remove leg"/> }
+          onClick={ () => onRemove(index) }
+          marginLeft="auto"
+          padding={ 2 }
+          borderWidth={ 0 }
+          cursor="pointer"
+          transition="quick"
+          color={ 'var(--color-text-secondary)' as never }
+          hoverStyle={ { color: 'var(--color-status-bad)' } as never }
         >
-          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          <svg width={ 14 } height={ 14 } viewBox="0 0 24 24" fill="none">
+            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
           </svg>
-        </button>
-      )}
-    </div>
+        </XStack>
+      ) }
+    </XStack>
   );
 }
 
@@ -360,108 +422,135 @@ export const StrategyBuilder = React.forwardRef<HTMLDivElement, StrategyBuilderP
     }, [onSubmit, strategyType, legs, netPremium]);
 
     const currentPreset = STRATEGY_PRESETS.find((p) => p.value === strategyType);
+    const netColor = netPremium > 0 ? 'var(--color-status-good)' : netPremium < 0 ? 'var(--color-status-bad)' : 'var(--color-text-secondary)';
 
     return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3',
-          className,
-        )}
-        {...rest}
+      <YStack
+        ref={ ref as never }
+        gap={ 12 }
+        borderRadius={ 8 }
+        borderWidth={ 1 }
+        borderColor={ 'var(--color-border-divider)' as never }
+        backgroundColor={ 'var(--card)' as never }
+        padding={ 12 }
+        className={ className }
+        { ...(rest as object) }
       >
         {/* Header */}
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
+        <XStack alignItems="center" justifyContent="space-between" gap={ 12 }>
+          <XStack alignItems="center" gap={ 8 }>
+            <Text fontSize={ 12 } fontWeight="600" textTransform="uppercase" letterSpacing={ 0.6 } color={ 'var(--color-text-secondary)' as never }>
               Strategy
-            </span>
-            <span className="text-sm font-medium text-zinc-200">
-              {underlying}
-            </span>
-          </div>
-          <span className="text-[10px] text-zinc-500">
-            Spot: <span className="font-mono tabular-nums text-zinc-300">{spotPrice.toFixed(2)}</span>
-          </span>
-        </div>
+            </Text>
+            <Text fontSize={ 14 } fontWeight="500" color={ 'var(--color-text-primary)' as never }>
+              { underlying }
+            </Text>
+          </XStack>
+          <Text fontSize={ 10 } color={ 'var(--color-text-secondary)' as never }>
+            Spot: <Text style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ 'var(--color-text-primary)' as never }>{ spotPrice.toFixed(2) }</Text>
+          </Text>
+        </XStack>
 
         {/* Strategy selector */}
-        <div className="flex items-center gap-2">
-          <select
-            value={strategyType}
-            onChange={handleStrategyChange}
-            className="flex-1 bg-zinc-900 border border-zinc-700 rounded-md px-2.5 py-1.5 text-sm text-zinc-200 outline-none focus:border-zinc-500"
+        <XStack alignItems="center" gap={ 8 }>
+          <View
+            unstyled
+            render={ <select/> }
+            value={ strategyType }
+            onChange={ handleStrategyChange }
+            flex={ 1 }
+            { ...CONTROL }
+            fontSize={ 14 }
+            borderRadius={ 6 }
+            paddingHorizontal={ 10 }
+            paddingVertical={ 6 }
           >
-            {STRATEGY_PRESETS.map((preset) => (
-              <option key={preset.value} value={preset.value}>
-                {preset.label}
+            { STRATEGY_PRESETS.map((preset) => (
+              <option key={ preset.value } value={ preset.value }>
+                { preset.label }
               </option>
-            ))}
-          </select>
-        </div>
+            )) }
+          </View>
+        </XStack>
 
-        {currentPreset && (
-          <p className="text-[11px] text-zinc-500 -mt-1">
-            {currentPreset.description}
-          </p>
-        )}
+        { currentPreset && (
+          <Text fontSize={ 11 } marginTop={ -4 } color={ 'var(--color-text-secondary)' as never }>
+            { currentPreset.description }
+          </Text>
+        ) }
 
         {/* Legs */}
-        <div className="flex flex-col gap-1.5">
-          {legs.map((leg, i) => (
+        <YStack gap={ 6 }>
+          { legs.map((leg, i) => (
             <LegRow
-              key={i}
-              leg={leg}
-              index={i}
-              strikes={strikes}
-              expirations={expirations}
-              removable={strategyType === 'custom' && legs.length > 1}
-              onChange={handleLegChange}
-              onRemove={handleLegRemove}
+              key={ i }
+              leg={ leg }
+              index={ i }
+              strikes={ strikes }
+              expirations={ expirations }
+              removable={ strategyType === 'custom' && legs.length > 1 }
+              onChange={ handleLegChange }
+              onRemove={ handleLegRemove }
             />
-          ))}
-        </div>
+          )) }
+        </YStack>
 
         {/* Add leg button (custom only) */}
-        {strategyType === 'custom' && legs.length < 4 && (
-          <button
-            type="button"
-            onClick={handleAddLeg}
-            className="flex items-center justify-center gap-1 rounded-md border border-dashed border-zinc-700 py-1 text-xs text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors"
+        { strategyType === 'custom' && legs.length < 4 && (
+          <XStack
+            unstyled
+            render={ <button type="button"/> }
+            onClick={ handleAddLeg }
+            alignItems="center"
+            justifyContent="center"
+            gap={ 4 }
+            borderRadius={ 6 }
+            borderWidth={ 1 }
+            paddingVertical={ 4 }
+            cursor="pointer"
+            transition="quick"
+            style={ { borderStyle: 'dashed' } as never }
+            borderColor={ 'var(--color-border-divider)' as never }
+            color={ 'var(--color-text-secondary)' as never }
+            hoverStyle={ { borderColor: 'var(--color-hover)', color: 'var(--color-hover)' } as never }
           >
-            <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none">
-              <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+            <svg width={ 12 } height={ 12 } viewBox="0 0 24 24" fill="none">
+              <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
             </svg>
-            Add Leg
-          </button>
-        )}
+            <Text unstyled fontSize={ 12 }>Add Leg</Text>
+          </XStack>
+        ) }
 
         {/* Net premium + submit */}
-        <div className="flex items-center justify-between pt-1 border-t border-zinc-800">
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-zinc-500">Net:</span>
-            <span className={cn(
-              'font-mono tabular-nums text-sm font-semibold',
-              netPremium > 0 ? 'text-emerald-400' : netPremium < 0 ? 'text-red-400' : 'text-zinc-400',
-            )}>
-              {netPremium > 0 ? 'Credit ' : netPremium < 0 ? 'Debit ' : ''}
-              {netPremium !== 0 ? `$${Math.abs(netPremium).toFixed(2)}` : '-'}
-            </span>
-          </div>
-          <button
-            type="button"
-            onClick={handleSubmit}
-            disabled={legs.length === 0}
-            className={cn(
-              'px-4 py-1.5 rounded-md text-xs font-semibold transition-colors',
-              'bg-blue-600 text-white hover:bg-blue-500',
-              'disabled:opacity-40 disabled:cursor-not-allowed',
-            )}
+        <XStack alignItems="center" justifyContent="space-between" paddingTop={ 4 } borderTopWidth={ 1 } borderColor={ 'var(--color-border-divider)' as never }>
+          <XStack alignItems="center" gap={ 8 }>
+            <Text fontSize={ 12 } color={ 'var(--color-text-secondary)' as never }>Net:</Text>
+            <Text fontSize={ 14 } fontWeight="600" style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ netColor as never }>
+              { netPremium > 0 ? 'Credit ' : netPremium < 0 ? 'Debit ' : '' }
+              { netPremium !== 0 ? `$${ Math.abs(netPremium).toFixed(2) }` : '-' }
+            </Text>
+          </XStack>
+          <XStack
+            unstyled
+            render={ <button type="button"/> }
+            onClick={ handleSubmit }
+            disabled={ legs.length === 0 }
+            paddingHorizontal={ 16 }
+            paddingVertical={ 6 }
+            borderRadius={ 6 }
+            borderWidth={ 0 }
+            cursor="pointer"
+            transition="quick"
+            backgroundColor={ 'var(--color-button-solid-bg)' as never }
+            hoverStyle={ { backgroundColor: 'var(--color-hover)' } as never }
+            disabledStyle={ { opacity: 0.4, cursor: 'not-allowed' } as never }
           >
-            Review Order
-          </button>
-        </div>
-      </div>
+            <Text fontSize={ 12 } fontWeight="600" color={ 'var(--color-button-solid-text)' as never }>
+              Review Order
+            </Text>
+          </XStack>
+        </XStack>
+      </YStack>
     );
   },
 );

package/src/switch.tsx

@@ -1,32 +1,23 @@
-import { Switch as GuiSwitch } from '@hanzo/gui';
+import { Label, Switch as GuiSwitch, Text, VisuallyHidden } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 const NOOP = () => { /* noop */ };
 
 // ─── Size mappings ────────────────────────────────────────────────────
 // Paint and box size only. Thumb travel is NOT a hardcoded translate any more:
 // gui measures the track and the knob and moves the knob by the difference, so
 // the switch stays correct at any size and on native.
-const SIZE_CLASSES = {
-  sm: {
-    root: 'h-4 w-7',
-    thumb: 'h-3 w-3',
-    label: 'text-xs',
-  },
-  md: {
-    root: 'h-5 w-9',
-    thumb: 'h-4 w-4',
-    label: 'text-sm',
-  },
-  lg: {
-    root: 'h-6 w-11',
-    thumb: 'h-5 w-5',
-    label: 'text-base',
-  },
+const SIZE = {
+  sm: { width: 28, height: 16, thumb: 12, label: 12 },
+  md: { width: 36, height: 20, thumb: 16, label: 14 },
+  lg: { width: 44, height: 24, thumb: 20, label: 16 },
 } as const;
 
+const TRACK_ON = 'var(--color-text-primary)' as never;
+const TRACK_OFF = 'var(--color-switch-bg)' as never;
+const OUTLINE = 'var(--color-gray-500)' as never;
+const WHITE = 'var(--color-white)' as never;
+
 // ─── Props ────────────────────────────────────────────────────────────
 export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'dir'> {
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
@@ -59,7 +50,6 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
       disabled = false,
       size = 'md',
       direction,
-      className,
       ...rest
     } = props;
 
@@ -80,78 +70,87 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
       [ isControlled, onCheckedChange ],
     );
 
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     const isRtl = direction === 'rtl';
 
     return (
-      <label
-        ref={ rootRef }
-        className={ cn(
-          'inline-flex items-center cursor-pointer select-none gap-2',
-          isRtl && 'flex-row-reverse',
-          disabled && 'opacity-50 cursor-not-allowed',
-          className,
-        ) }
-        onChange={ onChange }
+      <Label
+        ref={ rootRef as never }
+        unstyled
+        flexDirection={ isRtl ? 'row-reverse' : 'row' }
+        alignItems="center"
+        gap={ 8 }
+        cursor={ disabled ? 'not-allowed' : 'pointer' }
+        userSelect="none"
+        opacity={ disabled ? 0.5 : 1 }
+        onChange={ onChange as never }
         data-disabled={ disabled || undefined }
-        { ...rest }
+        { ...(rest as object) }
       >
         <GuiSwitch
           unstyled
           checked={ checkedState }
           onCheckedChange={ handleCheckedChange }
           disabled={ disabled }
-          className={ cn(
-            'relative inline-flex shrink-0 items-center rounded-full',
-            'bg-gray-300 dark:bg-gray-600',
-            'data-[state=checked]:bg-gray-800 dark:bg-white',
-            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
-            'transition-colors duration-200',
-            sizeClasses.root,
-          ) }
+          position="relative"
+          flexShrink={ 0 }
+          alignItems="center"
+          width={ s.width }
+          height={ s.height }
+          borderRadius={ 9999 }
+          backgroundColor={ checkedState ? TRACK_ON : TRACK_OFF }
+          transition="quick"
+          focusStyle={{ outlineWidth: 2, outlineStyle: 'solid', outlineColor: OUTLINE, outlineOffset: 2 }}
         >
           { trackLabel && (
-            <span className="absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none">
+            <Text
+              position="absolute"
+              width="100%"
+              textAlign="center"
+              fontSize={ 8 }
+              fontWeight="700"
+              color={ WHITE }
+              pointerEvents="none"
+            >
               { checkedState ? trackLabel.on : trackLabel.off }
-            </span>
+            </Text>
           ) }
           <GuiSwitch.Thumb
             unstyled
             data-thumb
             transition="quicker"
-            className={ cn(
-              'block rounded-full bg-white shadow-sm',
-              sizeClasses.thumb,
-            ) }
+            width={ s.thumb }
+            height={ s.thumb }
+            borderRadius={ 9999 }
+            backgroundColor={ WHITE }
+            boxShadow="0 1px 2px 0 rgba(0,0,0,0.05)"
           >
             { thumbLabel && (
-              <span className="flex items-center justify-center h-full w-full text-[8px]">
+              <Text width="100%" height="100%" textAlign="center" fontSize={ 8 }>
                 { checkedState ? thumbLabel.on : thumbLabel.off }
-              </span>
+              </Text>
             ) }
           </GuiSwitch.Thumb>
         </GuiSwitch>
         { /* Hidden native input for form compat and ref forwarding */ }
-        <input
-          ref={ ref }
-          type="checkbox"
-          className="sr-only"
-          checked={ checkedState }
-          disabled={ disabled }
-          tabIndex={ -1 }
-          aria-hidden
-          onChange={ NOOP }
-          { ...inputProps }
-        />
+        <VisuallyHidden>
+          <input
+            ref={ ref }
+            type="checkbox"
+            checked={ checkedState }
+            disabled={ disabled }
+            tabIndex={ -1 }
+            aria-hidden
+            onChange={ NOOP }
+            { ...inputProps }
+          />
+        </VisuallyHidden>
         { children != null && (
-          <span
-            { ...labelProps }
-            className={ cn(sizeClasses.label, labelProps?.className) }
-          >
+          <Text { ...(labelProps as object) } fontSize={ s.label }>
             { children }
-          </span>
+          </Text>
         ) }
-      </label>
+      </Label>
     );
   },
 );