@titan-design/react-ui 0.12.1 → 0.13.0

package/src/components/ui/floating-overlay-depth.test.tsx

@@ -0,0 +1,143 @@
+// The depth contract every floating overlay owes the lift model (E1).
+//
+// One panel, one recipe: the overlay plane from the grey ramp, the rim-light,
+// the three-layer ambient shadow, and NO hairline ring — a ring is an edge, not
+// a lift, and stays the divider's job. The panels are asserted as INLINE STYLE
+// because `<Surface>` writes background and shadow into `style`; a `bg-*` or
+// `shadow-*` className on one would be discarded, so asserting the class would
+// pass while the render was wrong. The plane comes from the ramp, so a re-space
+// moves these expectations rather than breaking them.
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { greyRamp } from '../../theme/tokens/primitives'
+import { Autocomplete } from './autocomplete'
+import { Drawer, DrawerBody } from './drawer'
+import { HelpTip } from './help-tip'
+import { Menu, MenuTrigger, MenuList, MenuItem } from './menu'
+import { Modal, ModalContent, ModalBody } from './modal'
+import { Popover, PopoverTrigger, PopoverContent } from './popover'
+import { Select } from './select'
+import { Toast } from './toast'
+import { Tooltip } from './tooltip'
+
+/** The plane every floating overlay shares: past the top of the ramp. */
+const OVERLAY = greyRamp[850]
+
+/** The nearest ancestor that paints a plane of its own — the floating panel. */
+function panelAround(child: HTMLElement): HTMLElement {
+  let el: HTMLElement | null = child
+  while (el && !el.style.boxShadow) el = el.parentElement
+  if (!el) throw new Error('no element with an inline boxShadow above the panel content')
+  return el
+}
+
+/** Split a boxShadow on its layer commas, ignoring the ones inside `rgba(...)`. */
+function shadowLayers(boxShadow: string): string[] {
+  return boxShadow.split(/,(?![^(]*\))/).filter((layer) => layer.trim())
+}
+
+function expectFloating(panel: HTMLElement) {
+  expect(panel).toHaveStyle({ backgroundColor: OVERLAY })
+  const layers = shadowLayers(panel.style.boxShadow)
+  expect(layers[0]).toContain('inset 0 1px 0 rgba(255,255,255,0.12)')
+  // Three ambient layers under the rim: the floating shadow, not a content lift.
+  expect(layers.slice(1)).toHaveLength(3)
+  expect(panel.style.borderTopWidth).toBe('')
+}
+
+/** Open the overlay, then assert the panel wrapping `contentText`. */
+function expectFloatingPanelAround(contentText: string) {
+  expectFloating(panelAround(screen.getByText(contentText)))
+}
+
+const options = [
+  { value: '1', label: 'Apple' },
+  { value: '2', label: 'Banana' },
+]
+
+describe('floating overlay depth', () => {
+  it('Menu list floats on the overlay plane with no ring', () => {
+    render(
+      <Menu>
+        <MenuTrigger>
+          <button>Options</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>Edit</MenuItem>
+        </MenuList>
+      </Menu>
+    )
+    fireEvent.click(screen.getByText('Options'))
+    expectFloatingPanelAround('Edit')
+  })
+
+  it('Popover content floats on the overlay plane with no ring', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>
+          <button>Open</button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <span>Popover body</span>
+        </PopoverContent>
+      </Popover>
+    )
+    fireEvent.click(screen.getByText('Open'))
+    expectFloatingPanelAround('Popover body')
+  })
+
+  it('Tooltip box floats on the overlay plane with no ring', () => {
+    render(
+      <Tooltip label="Tooltip text">
+        <button>Hover me</button>
+      </Tooltip>
+    )
+    fireEvent.mouseEnter(screen.getByText('Hover me').closest('[tabindex]')!)
+    expectFloatingPanelAround('Tooltip text')
+  })
+
+  it('HelpTip bubble floats on the overlay plane with no ring', () => {
+    render(<HelpTip content="Help text" />)
+    fireEvent.click(screen.getByRole('button', { name: 'Show help information' }))
+    expectFloatingPanelAround('Help text')
+  })
+
+  it('Select dropdown floats on the overlay plane with no ring', () => {
+    render(<Select options={options} />)
+    fireEvent.click(screen.getByRole('combobox'))
+    expectFloatingPanelAround('Banana')
+  })
+
+  it('Autocomplete dropdown floats on the overlay plane with no ring', () => {
+    render(<Autocomplete options={options} placeholder="Search" />)
+    fireEvent.focus(screen.getByPlaceholderText('Search'))
+    expectFloatingPanelAround('Banana')
+  })
+
+  it('Drawer panel floats on the overlay plane with no ring', () => {
+    render(
+      <Drawer isOpen onClose={vi.fn()} title="Test Drawer">
+        <DrawerBody>Drawer body</DrawerBody>
+      </Drawer>
+    )
+    expectFloatingPanelAround('Drawer body')
+  })
+
+  it('Modal content floats on the deepest lift with no ring', () => {
+    render(
+      <Modal isOpen onClose={vi.fn()}>
+        <ModalContent>
+          <ModalBody>Modal body</ModalBody>
+        </ModalContent>
+      </Modal>
+    )
+    expectFloatingPanelAround('Modal body')
+  })
+
+  it('Toast floats on the deepest lift with no ring', () => {
+    render(<Toast title="Saved" />)
+    // Its `border-l-4` status stripe is a colour accent on one edge, not a ring,
+    // and rides the className rather than the inline style asserted here.
+    expectFloatingPanelAround('Saved')
+  })
+})

package/src/components/ui/form-field/FormField.stories.tsx

@@ -2,12 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text, TextInput } from 'react-native'
 import { FormField, FormSection, FormActions, FormRow } from './FormField'
 import { Button, ButtonText } from '../button'
-import { Input } from '../input'
 
 const meta: Meta<typeof FormField> = {
   title: 'Components/Molecules/FormField',
   component: FormField,
-  tags: ['autodocs'],
+  parameters: {},
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     labelSize: {
       control: 'select',
@@ -70,10 +70,7 @@ export const Required: Story = {
 export const WithHelperText: Story = {
   render: () => (
     <View className="w-80">
-      <FormField
-        label="Username"
-        helperText="Choose a unique username between 3-20 characters"
-      >
+      <FormField label="Username" helperText="Choose a unique username between 3-20 characters">
         <SimpleInput placeholder="Enter username" />
       </FormField>
     </View>
@@ -83,11 +80,7 @@ export const WithHelperText: Story = {
 export const WithError: Story = {
   render: () => (
     <View className="w-80">
-      <FormField
-        label="Password"
-        isRequired
-        errorMessage="Password must be at least 8 characters"
-      >
+      <FormField label="Password" isRequired errorMessage="Password must be at least 8 characters">
         <SimpleInput placeholder="Enter password" isInvalid />
       </FormField>
     </View>
@@ -159,10 +152,7 @@ export const FormRowExample: Story = {
 export const FormSectionExample: Story = {
   render: () => (
     <View className="w-full max-w-lg">
-      <FormSection
-        title="Personal Information"
-        description="Please provide your personal details"
-      >
+      <FormSection title="Personal Information" description="Please provide your personal details">
         <FormRow>
           <FormField label="First Name" isRequired className="flex-1">
             <SimpleInput placeholder="John" />
@@ -240,11 +230,7 @@ export const ValidationStates: Story = {
         </View>
       </FormField>
 
-      <FormField
-        label="Invalid Input"
-        isRequired
-        errorMessage="Please enter a valid email address"
-      >
+      <FormField label="Invalid Input" isRequired errorMessage="Please enter a valid email address">
         <View className="border border-status-error rounded-md px-3 py-2 bg-surface-input">
           <Text className="text-text-primary">not-an-email</Text>
         </View>

package/src/components/ui/form-field/FormField.test.tsx

@@ -64,11 +64,7 @@ describe('FormField', () => {
 
     it('shows error message instead of helper text when both are provided', () => {
       render(
-        <FormField
-          label="Email"
-          helperText="Enter a valid email"
-          errorMessage="Invalid email"
-        >
+        <FormField label="Email" helperText="Enter a valid email" errorMessage="Invalid email">
           <input />
         </FormField>
       )

package/src/components/ui/form-field/FormField.tsx

@@ -95,22 +95,12 @@ export function FormField({
       {/* Label Section */}
       {label && (
         <View
-          className={cn(
-            'flex-row items-center',
-            isHorizontal ? 'pt-2' : 'mb-1.5'
-          )}
+          className={cn('flex-row items-center', isHorizontal ? 'pt-2' : 'mb-1.5')}
           style={isHorizontal && labelWidth ? { width: labelWidth as number } : undefined}
         >
-          <Text
-            className={cn(
-              'font-medium text-text-primary',
-              labelSizeStyles[labelSize]
-            )}
-          >
+          <Text className={cn('font-medium text-text-primary', labelSizeStyles[labelSize])}>
             {label}
-            {isRequired && (
-              <Text className="text-status-error ml-0.5">*</Text>
-            )}
+            {isRequired && <Text className="text-status-error ml-0.5">*</Text>}
           </Text>
 
           {helpContent && (
@@ -147,10 +137,7 @@ export function FormField({
         {(helperText || errorMessage) && (
           <Text
             id={isInvalid ? errorId : helperId}
-            className={cn(
-              'text-xs mt-1.5',
-              isInvalid ? 'text-status-error' : 'text-text-tertiary'
-            )}
+            className={cn('text-xs mt-1.5', isInvalid ? 'text-status-error' : 'text-text-tertiary')}
           >
             {errorMessage || helperText}
           </Text>
@@ -199,22 +186,12 @@ export function FormSection({
     >
       {(title || description) && (
         <View className="mb-4">
-          {title && (
-            <Text className="text-lg font-semibold text-text-primary">
-              {title}
-            </Text>
-          )}
-          {description && (
-            <Text className="text-sm text-text-secondary mt-1">
-              {description}
-            </Text>
-          )}
+          {title && <Text className="text-lg font-semibold text-text-primary">{title}</Text>}
+          {description && <Text className="text-sm text-text-secondary mt-1">{description}</Text>}
         </View>
       )}
 
-      <View className="gap-4">
-        {children}
-      </View>
+      <View className="gap-4">{children}</View>
     </View>
   )
 }
@@ -243,12 +220,7 @@ const alignStyles = {
  *   <Button>Submit</Button>
  * </FormActions>
  */
-export function FormActions({
-  align = 'right',
-  className,
-  children,
-  ...props
-}: FormActionsProps) {
+export function FormActions({ align = 'right', className, children, ...props }: FormActionsProps) {
   return (
     <View
       className={cn(
@@ -291,17 +263,9 @@ const gapStyles = {
  *   </FormField>
  * </FormRow>
  */
-export function FormRow({
-  gap = 'md',
-  className,
-  children,
-  ...props
-}: FormRowProps) {
+export function FormRow({ gap = 'md', className, children, ...props }: FormRowProps) {
   return (
-    <View
-      className={cn('flex-row items-start', gapStyles[gap], className)}
-      {...props}
-    >
+    <View className={cn('flex-row items-start', gapStyles[gap], className)} {...props}>
       {children}
     </View>
   )

package/src/components/ui/help-tip/HelpTip.stories.tsx

@@ -5,7 +5,7 @@ import { HelpTip, LabelWithHelp } from './HelpTip'
 const meta: Meta<typeof HelpTip> = {
   title: 'Components/Molecules/HelpTip',
   component: HelpTip,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   argTypes: {
     size: {
       control: 'select',
@@ -115,7 +115,8 @@ export const AllPlacements: Story = {
 
 export const WithLongContent: Story = {
   args: {
-    content: 'This is a longer tooltip that contains more detailed information about the feature. It will wrap to multiple lines if needed, and you can customize the max width.',
+    content:
+      'This is a longer tooltip that contains more detailed information about the feature. It will wrap to multiple lines if needed, and you can customize the max width.',
     maxWidth: 300,
   },
 }
@@ -126,15 +127,9 @@ export const WithRichContent: Story = {
       content={
         <View className="gap-1">
           <Text className="text-sm font-semibold text-text-primary">API Rate Limits</Text>
-          <Text className="text-xs text-text-secondary">
-            • Free tier: 100 requests/hour
-          </Text>
-          <Text className="text-xs text-text-secondary">
-            • Pro tier: 1000 requests/hour
-          </Text>
-          <Text className="text-xs text-text-secondary">
-            • Enterprise: Unlimited
-          </Text>
+          <Text className="text-xs text-text-secondary">• Free tier: 100 requests/hour</Text>
+          <Text className="text-xs text-text-secondary">• Pro tier: 1000 requests/hour</Text>
+          <Text className="text-xs text-text-secondary">• Enterprise: Unlimited</Text>
         </View>
       }
       icon="info"
@@ -148,10 +143,7 @@ export const InlineWithLabel: Story = {
     <View className="gap-4">
       <View className="flex-row items-center gap-1">
         <Text className="text-sm font-medium text-text-primary">Email Address</Text>
-        <HelpTip
-          content="We'll never share your email with third parties."
-          size="sm"
-        />
+        <HelpTip content="We'll never share your email with third parties." size="sm" />
       </View>
 
       <View className="flex-row items-center gap-1">
@@ -178,10 +170,7 @@ export const InlineWithLabel: Story = {
 export const LabelWithHelpComponent: Story = {
   render: () => (
     <View className="gap-4">
-      <LabelWithHelp
-        label="Username"
-        helpContent="Choose a unique username for your account."
-      />
+      <LabelWithHelp label="Username" helpContent="Choose a unique username for your account." />
 
       <LabelWithHelp
         label="Email Address"

package/src/components/ui/help-tip/HelpTip.test.tsx

@@ -28,9 +28,7 @@ describe('HelpTip', () => {
   })
 
   it('renders custom ReactNode content', () => {
-    render(
-      <HelpTip content={<span data-testid="custom-content">Rich content</span>} />
-    )
+    render(<HelpTip content={<span data-testid="custom-content">Rich content</span>} />)
 
     fireEvent.click(screen.getByRole('button', { name: 'Show help information' }))
     expect(screen.getByTestId('custom-content')).toBeInTheDocument()

package/src/components/ui/help-tip/HelpTip.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
 
 export type HelpTipSize = 'sm' | 'md' | 'lg'
 export type HelpTipPlacement = 'top' | 'bottom' | 'left' | 'right'
@@ -56,10 +57,12 @@ const placementStyles: Record<HelpTipPlacement, string> = {
 }
 
 const arrowStyles: Record<HelpTipPlacement, string> = {
-  top: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-t-surface-elevated border-x-transparent border-b-transparent',
-  bottom: 'top-0 left-1/2 -translate-x-1/2 -translate-y-full border-b-surface-elevated border-x-transparent border-t-transparent',
-  left: 'right-0 top-1/2 -translate-y-1/2 translate-x-full border-l-surface-elevated border-y-transparent border-r-transparent',
-  right: 'left-0 top-1/2 -translate-y-1/2 -translate-x-full border-r-surface-elevated border-y-transparent border-l-transparent',
+  top: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-t-surface-overlay border-x-transparent border-b-transparent',
+  bottom:
+    'top-0 left-1/2 -translate-x-1/2 -translate-y-full border-b-surface-overlay border-x-transparent border-t-transparent',
+  left: 'right-0 top-1/2 -translate-y-1/2 translate-x-full border-l-surface-overlay border-y-transparent border-r-transparent',
+  right:
+    'left-0 top-1/2 -translate-y-1/2 -translate-x-full border-r-surface-overlay border-y-transparent border-l-transparent',
 }
 
 /**
@@ -87,6 +90,9 @@ const arrowStyles: Record<HelpTipPlacement, string> = {
  *   <Text>Email Address</Text>
  *   <HelpTip content="We'll never share your email with anyone." size="sm" />
  * </View>
+ *
+ * @deprecated Use `Tooltip` (roadmap decision 5) — removed after AW-127
+ * consumer migration.
  */
 export function HelpTip({
   content,
@@ -144,43 +150,33 @@ export function HelpTip({
           iconClassName
         )}
       >
-        <Text className={cn('font-semibold', iconSize, colorStyles[color])}>
-          {iconMap[icon]}
-        </Text>
+        <Text className={cn('font-semibold', iconSize, colorStyles[color])}>{iconMap[icon]}</Text>
       </Pressable>
 
       {/* Tooltip */}
       {isOpen && (
-        <View
+        <Surface
+          elevation={4}
+          rounded={false}
           className={cn(
             'absolute z-50',
-            'bg-surface-elevated rounded-lg shadow-lg',
-            'border border-hairline',
-            'px-3 py-2',
+            'rounded-lg px-3 py-2',
             placementStyles[placement],
             tooltipClassName
           )}
           style={{ maxWidth }}
         >
           {typeof content === 'string' ? (
-            <Text className={cn('text-text-primary', textSize)}>
-              {content}
-            </Text>
+            <Text className={cn('text-text-primary', textSize)}>{content}</Text>
           ) : (
             content
           )}
 
           {/* Arrow */}
           {hasArrow && (
-            <View
-              className={cn(
-                'absolute w-0 h-0',
-                'border-4',
-                arrowStyles[placement]
-              )}
-            />
+            <View className={cn('absolute w-0 h-0', 'border-4', arrowStyles[placement])} />
           )}
-        </View>
+        </Surface>
       )}
     </View>
   )
@@ -208,6 +204,9 @@ export interface LabelWithHelpProps extends ViewProps {
  *   helpContent="Your API key can be found in the developer settings."
  *   isRequired
  * />
+ *
+ * @deprecated Use `Tooltip` beside your own label (roadmap decision 5) —
+ * removed after AW-127 consumer migration.
  */
 export function LabelWithHelp({
   label,

package/src/components/ui/help-tip/index.ts

@@ -1,2 +1,8 @@
 export { HelpTip, LabelWithHelp } from './HelpTip'
-export type { HelpTipProps, LabelWithHelpProps, HelpTipSize, HelpTipPlacement, HelpTipIcon } from './HelpTip'
+export type {
+  HelpTipProps,
+  LabelWithHelpProps,
+  HelpTipSize,
+  HelpTipPlacement,
+  HelpTipIcon,
+} from './HelpTip'

package/src/components/ui/icon-box/IconBox.stories.tsx

@@ -55,7 +55,7 @@ function BoltIcon({ size = 20, className }: { size?: number; className?: string
 const meta: Meta<typeof IconBox> = {
   title: 'Components/Atoms/IconBox',
   component: IconBox,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     color: {
       control: 'select',

package/src/components/ui/icon-box/IconBox.test.tsx

@@ -98,13 +98,7 @@ describe('IconBox', () => {
 
   it('renders with all props combined', () => {
     render(
-      <IconBox
-        icon={MockIcon}
-        color="success"
-        size="lg"
-        className="mt-2"
-        testID="full-icon-box"
-      />,
+      <IconBox icon={MockIcon} color="success" size="lg" className="mt-2" testID="full-icon-box" />
     )
     expect(screen.getByTestId('full-icon-box')).toBeInTheDocument()
     expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '24')

package/src/components/ui/icon-box/IconBox.tsx

@@ -2,14 +2,7 @@ import React from 'react'
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 
-type IconBoxColor =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'error'
-  | 'warning'
-  | 'info'
-  | 'neutral'
+type IconBoxColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'
 
 type IconBoxSize = 'sm' | 'md' | 'lg'
 
@@ -47,10 +40,7 @@ export function IconBox({
   const sizes = sizeClasses[size]
 
   return (
-    <View
-      className={cn('items-center justify-center', colors.bg, sizes.box, className)}
-      {...props}
-    >
+    <View className={cn('items-center justify-center', colors.bg, sizes.box, className)} {...props}>
       <Icon size={sizes.iconSize} className={colors.icon} />
     </View>
   )

package/src/components/ui/indicator/Indicator.stories.tsx

@@ -5,7 +5,7 @@ import { Indicator } from './Indicator'
 const meta: Meta<typeof Indicator> = {
   title: 'Components/Atoms/Indicator',
   component: Indicator,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
     color: {

package/src/components/ui/indicator/Indicator.tsx

@@ -1,5 +1,8 @@
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { getGlowShadow } from '../../../theme/elevation'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 export type IndicatorSize = 'xs' | 'sm' | 'md' | 'lg'
 export type IndicatorColor =
@@ -50,6 +53,21 @@ const colorStyles: Record<IndicatorColor, string> = {
   'error-vivid': 'bg-status-error-vivid',
 }
 
+// Glow is EMPHASIS, not depth: the dot's own colour, through the shared builder.
+// Literal hex (not `resolveColor`) because getGlowShadow does colour maths on it.
+const t = getSemanticColors('dark')
+
+const glowColors: Record<IndicatorColor, string> = {
+  default: greyRamp[500],
+  primary: t['brand-primary'],
+  success: t['status-success'],
+  live: t['status-live'],
+  error: t['status-error'],
+  warning: t['status-warning'],
+  info: t['status-info'],
+  'error-vivid': t['status-error-vivid'],
+}
+
 export function Indicator({
   size = 'sm',
   color = 'default',
@@ -86,11 +104,7 @@ export function Indicator({
     )
   }
 
-  const dynamicStyle = {
-    ...(typeof style === 'object' ? style : {}),
-    ...(colorStyle ?? {}),
-    ...(glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}),
-  }
+  const glowStyle = glow ? getGlowShadow(customColor ?? glowColors[color], 'subtle') : null
 
   return (
     <View
@@ -100,17 +114,9 @@ export function Indicator({
         colorClass,
         pulseMode === 'opacity' && 'animate-pulse',
         ring && 'border-2 border-background-base',
-        glow &&
-          !customColor &&
-          (color === 'success' || color === 'live') &&
-          'shadow-[0_0_6px_rgba(46,213,115,0.6)]',
-        glow && !customColor && color === 'error' && 'shadow-[0_0_6px_rgba(239,68,68,0.6)]',
-        glow && !customColor && color === 'warning' && 'shadow-[0_0_6px_rgba(245,158,11,0.6)]',
-        glow && !customColor && color === 'primary' && 'shadow-[0_0_6px_rgba(255,121,0,0.6)]',
-        glow && !customColor && color === 'error-vivid' && 'shadow-[0_0_6px_rgba(255,71,87,0.6)]',
         className
       )}
-      style={Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style}
+      style={[style, colorStyle, glowStyle]}
       {...props}
     />
   )

package/src/components/ui/input/Input.stories.tsx

@@ -5,7 +5,7 @@ import { Input, InputGroup, PasswordInput } from './Input'
 const meta: Meta<typeof Input> = {
   title: 'Components/Molecules/Input',
   component: Input,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -161,10 +161,7 @@ function SearchIcon() {
 export const WithLeftElement: Story = {
   render: () => (
     <View style={{ gap: 16, width: 300 }}>
-      <Input
-        placeholder="Search..."
-        leftElement={<SearchIcon />}
-      />
+      <Input placeholder="Search..." leftElement={<SearchIcon />} />
     </View>
   ),
 }
@@ -181,12 +178,7 @@ export const FormExample: Story = {
         helperText="Must be at least 8 characters"
         isRequired
       />
-      <Input
-        label="Bio"
-        placeholder="Tell us about yourself..."
-        multiline
-        numberOfLines={3}
-      />
+      <Input label="Bio" placeholder="Tell us about yourself..." multiline numberOfLines={3} />
     </InputGroup>
   ),
 }