aeon-ui-engine 1.0.0 → 1.0.1

package/packages/react/src/tooltip/index.tsx

@@ -8,20 +8,32 @@ import {
   useMemo,
   useRef,
   useState,
+  type FocusEvent,
   type HTMLAttributes,
+  type MouseEvent,
+  type PointerEvent,
   type ReactNode,
 } from 'react'
+import { FloatingPositioner } from '../floating/FloatingPositioner.js'
+import { useOutsideClick } from '../hooks/use-outside-click.js'
+import { usePrefersHover } from '../hooks/use-prefers-hover.js'
 import { mergeProps } from '../utils/merge-props.js'
+import type { AnchorPlacement } from '../hooks/use-anchor-position.js'
 
 interface TooltipContextValue {
   open: boolean
   setOpen: (open: boolean) => void
   triggerId: string
   contentId: string
+  triggerRef: React.RefObject<HTMLSpanElement | null>
+  positionerRef: React.RefObject<HTMLDivElement | null>
   scheduleShow: () => void
   scheduleHide: () => void
+  showImmediately: () => void
   hideNow: () => void
+  toggleTouch: () => void
   showOnFocus: boolean
+  prefersHover: boolean
 }
 
 const TooltipCtx = createContext<TooltipContextValue | null>(null)
@@ -38,6 +50,10 @@ export interface TooltipRootProps {
   onOpenChange?: (open: boolean) => void
   openDelay?: number
   closeDelay?: number
+  /** Auto-hide on touch devices after open (0 = until outside tap). Default 5000. */
+  touchDurationMs?: number
+  /** Ignore outside-dismiss briefly after touch open (ghost-click guard). */
+  touchOutsideGraceMs?: number
   /** Focus after click/tap can leave tooltips open; disable for dense click targets. */
   showOnFocus?: boolean
   children?: ReactNode
@@ -51,6 +67,8 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
     onOpenChange,
     openDelay = 400,
     closeDelay = 100,
+    touchDurationMs = 5000,
+    touchOutsideGraceMs = 400,
     showOnFocus = true,
     children,
     className,
@@ -62,8 +80,22 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
   const resolvedOpen = open ?? uncontrolled
   const showTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const triggerRef = useRef<HTMLSpanElement>(null)
+  const positionerRef = useRef<HTMLDivElement>(null)
   const triggerId = useId()
   const contentId = useId()
+  const prefersHover = usePrefersHover()
+  const [outsideClickEnabled, setOutsideClickEnabled] = useState(false)
+
+  useEffect(() => {
+    if (!resolvedOpen || prefersHover) {
+      setOutsideClickEnabled(false)
+      return
+    }
+    setOutsideClickEnabled(false)
+    const id = window.setTimeout(() => setOutsideClickEnabled(true), touchOutsideGraceMs)
+    return () => window.clearTimeout(id)
+  }, [resolvedOpen, prefersHover, touchOutsideGraceMs])
 
   const setOpen = (next: boolean) => {
     if (open === undefined) setUncontrolled(next)
@@ -80,6 +112,17 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
     setOpen(false)
   }
 
+  const showImmediately = () => {
+    if (showTimer.current !== undefined) clearTimeout(showTimer.current)
+    if (hideTimer.current !== undefined) clearTimeout(hideTimer.current)
+    setOpen(true)
+    if (!prefersHover) {
+      if (touchDurationMs > 0) {
+        hideTimer.current = setTimeout(() => hideNow(), touchDurationMs)
+      }
+    }
+  }
+
   const scheduleShow = () => {
     if (hideTimer.current !== undefined) clearTimeout(hideTimer.current)
     showTimer.current = setTimeout(() => setOpen(true), openDelay)
@@ -94,18 +137,30 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
     hideTimer.current = setTimeout(() => setOpen(false), closeDelay)
   }
 
+  const toggleTouch = () => {
+    if (resolvedOpen) hideNow()
+    else showImmediately()
+  }
+
+  useOutsideClick([triggerRef, positionerRef], resolvedOpen && !prefersHover && outsideClickEnabled, hideNow)
+
   const value = useMemo(
     () => ({
       open: resolvedOpen,
       setOpen,
       triggerId,
       contentId,
+      triggerRef,
+      positionerRef,
       scheduleShow,
       scheduleHide,
+      showImmediately,
       hideNow,
+      toggleTouch,
       showOnFocus,
+      prefersHover,
     }),
-    [resolvedOpen, triggerId, contentId, openDelay, closeDelay, showOnFocus],
+    [resolvedOpen, triggerId, contentId, openDelay, closeDelay, touchDurationMs, touchOutsideGraceMs, showOnFocus, prefersHover],
   )
 
   return (
@@ -127,45 +182,94 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
 })
 
 const Trigger = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function TooltipTrigger(
-  props,
+  { onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onPointerDown, ...rest },
   ref,
 ) {
-  const { open, triggerId, contentId, scheduleShow, scheduleHide, hideNow, showOnFocus } =
-    useTooltipCtx()
+  const {
+    open,
+    triggerId,
+    contentId,
+    triggerRef,
+    scheduleShow,
+    scheduleHide,
+    hideNow,
+    toggleTouch,
+    showOnFocus,
+    prefersHover,
+  } = useTooltipCtx()
+
   return (
     <span
-      ref={ref}
+      ref={(node) => {
+        triggerRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
       id={triggerId}
       tabIndex={0}
       aria-describedby={open ? contentId : undefined}
       {...mergeProps(
         partAttrs(tooltipAnatomy.scope, tooltipAnatomy.trigger, { state: open ? 'open' : 'closed' }),
         {
-          onMouseEnter: scheduleShow,
-          onMouseLeave: scheduleHide,
-          onFocus: showOnFocus ? scheduleShow : undefined,
-          onBlur: showOnFocus ? scheduleHide : undefined,
-          /* Dismiss on press only for focus-driven tooltips; on dense click targets
-             pointerdown-dismiss races the child button click and drops the event. */
-          onPointerDown: showOnFocus ? hideNow : undefined,
+          onMouseEnter: (e: MouseEvent<HTMLSpanElement>) => {
+            onMouseEnter?.(e)
+            if (prefersHover) scheduleShow()
+          },
+          onMouseLeave: (e: MouseEvent<HTMLSpanElement>) => {
+            onMouseLeave?.(e)
+            if (prefersHover) scheduleHide()
+          },
+          onFocus: (e: FocusEvent<HTMLSpanElement>) => {
+            onFocus?.(e)
+            if (showOnFocus && prefersHover) scheduleShow()
+          },
+          onBlur: (e: FocusEvent<HTMLSpanElement>) => {
+            onBlur?.(e)
+            if (showOnFocus && prefersHover) scheduleHide()
+          },
+          onClick: (e: MouseEvent<HTMLSpanElement>) => {
+            onClick?.(e)
+            if (!e.defaultPrevented && !prefersHover) toggleTouch()
+          },
+          onPointerDown: (e: PointerEvent<HTMLSpanElement>) => {
+            onPointerDown?.(e)
+            if (showOnFocus && prefersHover && e.pointerType === 'mouse') hideNow()
+          },
         },
-        props,
+        rest,
       )}
     />
   )
 })
 
-const Positioner = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function TooltipPositioner(
-  props,
+export interface TooltipPositionerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Mount tooltip in document.body (default true). */
+  portalled?: boolean
+  placement?: AnchorPlacement
+  children?: ReactNode
+}
+
+const Positioner = forwardRef<HTMLDivElement, TooltipPositionerProps>(function TooltipPositioner(
+  { portalled = true, placement = 'top-start', children, className, ...rest },
   ref,
 ) {
-  const { open } = useTooltipCtx()
-  if (!open) return null
+  const { open, triggerRef, positionerRef } = useTooltipCtx()
+
   return (
-    <div
+    <FloatingPositioner
       ref={ref}
-      {...mergeProps(partAttrs(tooltipAnatomy.scope, tooltipAnatomy.positioner, { state: 'open' }), props)}
-    />
+      open={open}
+      scope={tooltipAnatomy.scope}
+      part={tooltipAnatomy.positioner}
+      triggerRef={triggerRef}
+      positionerRef={positionerRef}
+      portalled={portalled}
+      placement={placement}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </FloatingPositioner>
   )
 })
 

package/packages/react/src/tooltip/tooltip.test.tsx

@@ -0,0 +1,114 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Tooltip } from './index.js'
+
+function mockPrefersHover(matches: boolean) {
+  vi.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+    matches: query.includes('hover: hover') ? matches : false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }))
+}
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.useRealTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('opens on hover when the device supports hover', async () => {
+    mockPrefersHover(true)
+    const user = userEvent.setup()
+
+    render(
+      <Tooltip.Root openDelay={0}>
+        <Tooltip.Trigger>Anchor</Tooltip.Trigger>
+        <Tooltip.Positioner portalled={false}>
+          <Tooltip.Content>Hint</Tooltip.Content>
+        </Tooltip.Positioner>
+      </Tooltip.Root>,
+    )
+
+    await user.hover(screen.getByText('Anchor'))
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Hint')
+  })
+
+  it('toggles on tap when hover is unavailable', async () => {
+    mockPrefersHover(false)
+    const user = userEvent.setup()
+
+    render(
+      <Tooltip.Root>
+        <Tooltip.Trigger>Anchor</Tooltip.Trigger>
+        <Tooltip.Positioner portalled={false}>
+          <Tooltip.Content>Hint</Tooltip.Content>
+        </Tooltip.Positioner>
+      </Tooltip.Root>,
+    )
+
+    const trigger = screen.getByText('Anchor')
+    await user.click(trigger)
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Hint')
+
+    await user.click(trigger)
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+  })
+
+  it('stays open for touchDurationMs on touch devices', () => {
+    vi.useFakeTimers()
+    mockPrefersHover(false)
+
+    render(
+      <Tooltip.Root touchDurationMs={5000}>
+        <Tooltip.Trigger>Anchor</Tooltip.Trigger>
+        <Tooltip.Positioner portalled={false}>
+          <Tooltip.Content>Hint</Tooltip.Content>
+        </Tooltip.Positioner>
+      </Tooltip.Root>,
+    )
+
+    fireEvent.click(screen.getByText('Anchor'))
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(4999)
+    })
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+  })
+
+  it('closes on outside tap when hover is unavailable', async () => {
+    mockPrefersHover(false)
+    const user = userEvent.setup()
+
+    render(
+      <div>
+        <Tooltip.Root touchOutsideGraceMs={0}>
+          <Tooltip.Trigger>Anchor</Tooltip.Trigger>
+          <Tooltip.Positioner portalled={false}>
+            <Tooltip.Content>Hint</Tooltip.Content>
+          </Tooltip.Positioner>
+        </Tooltip.Root>
+        <button type="button">Elsewhere</button>
+      </div>,
+    )
+
+    await user.click(screen.getByText('Anchor'))
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Elsewhere' }))
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+  })
+})

package/packages/site/README.md

@@ -9,7 +9,7 @@ const html = openGraphHeadHtml({
   title: 'Aeon UI — Future-proof UI infrastructure',
   description: 'Statechart-driven primitives and a styled layer your team controls.',
   url: absoluteUrl('https://aeon-ui.com', '/'),
-  image: absoluteUrl('https://aeon-ui.com', '/og.png'),
+  image: absoluteUrl('https://aeon-ui.com', '/og-aeon-ui-engine.png'),
   siteName: 'Aeon UI',
 })
 ```

package/packages/ui/src/index.ts

@@ -5,6 +5,11 @@ export { Switch } from './switch.js'
 export { Checkbox } from './checkbox.js'
 export { Dialog } from './dialog.js'
 export { Tabs } from './tabs.js'
+export { Separator } from './separator.js'
+export { Progress } from './progress.js'
+export { RadioGroup } from './radio-group.js'
+export { Slider } from './slider.js'
+export { PinInput } from './pin-input.js'
 export { Accordion } from './accordion.js'
 export { Badge } from './badge.js'
 export { Scroll } from './scroll.js'

package/packages/ui/src/pin-input.tsx

@@ -0,0 +1,16 @@
+import { PinInput as Headless } from '@aeon-ui/react'
+import { aeonPinInput } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const pinInput = aeonPinInput()
+
+export const PinInput = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(pinInput.root, className)} {...props} />
+  ),
+  Input: ({ className, ...props }: ComponentProps<typeof Headless.Input>) => (
+    <Headless.Input className={cn(pinInput.input, className)} {...props} />
+  ),
+  Group: Headless.Group,
+}

package/packages/ui/src/progress.tsx

@@ -0,0 +1,21 @@
+import { Progress as Headless } from '@aeon-ui/react'
+import { aeonProgress } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const progress = aeonProgress()
+
+export const Progress = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(progress.root, className)} {...props} />
+  ),
+  Track: ({ className, ...props }: ComponentProps<typeof Headless.Track>) => (
+    <Headless.Track className={cn(progress.track, className)} {...props} />
+  ),
+  Range: ({ className, ...props }: ComponentProps<typeof Headless.Range>) => (
+    <Headless.Range className={cn(progress.range, className)} {...props} />
+  ),
+  Label: ({ className, ...props }: ComponentProps<typeof Headless.Label>) => (
+    <Headless.Label className={cn(progress.label, className)} {...props} />
+  ),
+}

package/packages/ui/src/radio-group.tsx

@@ -0,0 +1,24 @@
+import { RadioGroup as Headless } from '@aeon-ui/react'
+import { aeonRadioGroup } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const radioGroup = aeonRadioGroup()
+
+export const RadioGroup = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(radioGroup.root, className)} {...props} />
+  ),
+  Item: ({ className, ...props }: ComponentProps<typeof Headless.Item>) => (
+    <Headless.Item className={cn(radioGroup.item, className)} {...props} />
+  ),
+  ItemControl: ({ className, ...props }: ComponentProps<typeof Headless.ItemControl>) => (
+    <Headless.ItemControl className={cn(radioGroup.itemControl, className)} {...props} />
+  ),
+  ItemIndicator: ({ className, ...props }: ComponentProps<typeof Headless.ItemIndicator>) => (
+    <Headless.ItemIndicator className={cn(radioGroup.itemIndicator, className)} {...props} />
+  ),
+  ItemLabel: ({ className, ...props }: ComponentProps<typeof Headless.ItemLabel>) => (
+    <Headless.ItemLabel className={cn(radioGroup.itemLabel, className)} {...props} />
+  ),
+}

package/packages/ui/src/separator.tsx

@@ -0,0 +1,15 @@
+import { Separator as Headless } from '@aeon-ui/react'
+import { aeonSeparator } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export const Separator = {
+  Root: ({ className, orientation = 'horizontal', ...props }: RootProps) => {
+    const styles = aeonSeparator({ orientation })
+    return <Headless.Root className={cn(styles.root, className)} orientation={orientation} {...props} />
+  },
+}

package/packages/ui/src/slider.tsx

@@ -0,0 +1,24 @@
+import { Slider as Headless } from '@aeon-ui/react'
+import { aeonSlider } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const slider = aeonSlider()
+
+export const Slider = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(slider.root, className)} {...props} />
+  ),
+  Track: ({ className, ...props }: ComponentProps<typeof Headless.Track>) => (
+    <Headless.Track className={cn(slider.track, className)} {...props} />
+  ),
+  Range: ({ className, ...props }: ComponentProps<typeof Headless.Range>) => (
+    <Headless.Range className={cn(slider.range, className)} {...props} />
+  ),
+  Thumb: ({ className, ...props }: ComponentProps<typeof Headless.Thumb>) => (
+    <Headless.Thumb className={cn(slider.thumb, className)} {...props} />
+  ),
+  ValueText: ({ className, ...props }: ComponentProps<typeof Headless.ValueText>) => (
+    <Headless.ValueText className={cn(slider.valueText, className)} {...props} />
+  ),
+}

package/apps/demo/src/components/SceneSection.tsx

@@ -1,157 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Button } from '@aeon-ui/ui'
-import { createDemoSignal, type DemoSignal } from '@aeon-ui/signal'
-import { surfaceMaterials } from '@aeon-ui/surface'
-import {
-  ProceduralGrid,
-  SceneLayer,
-  ScenePlane,
-  SceneRoot,
-  SceneSlot,
-  SceneStage,
-  SceneSurface,
-  SignalBars,
-} from '@aeon-ui/react-scene'
-import { site } from '../site.js'
-
-export function SceneSection() {
-  const [demo, setDemo] = useState<DemoSignal | null>(null)
-  const playing = demo !== null
-
-  useEffect(() => {
-    return () => {
-      demo?.stop()
-    }
-  }, [demo])
-
-  const toggleDemo = () => {
-    if (demo) {
-      demo.stop()
-      setDemo(null)
-      return
-    }
-    const next = createDemoSignal({ frequency: 92 })
-    next.start()
-    setDemo(next)
-  }
-
-  return (
-    <section id="scene" className="section">
-      <div className="container">
-        <header className="section-header">
-          <p className="section-label">{site.sceneLabel}</p>
-          <h2 className="section-title">{site.sceneTitle}</h2>
-          <p className="section-lead">{site.sceneLead}</p>
-        </header>
-
-        <div className="scene-demo panel">
-          <SceneRoot className="scene-demo__stage" state={playing ? 'active' : 'idle'}>
-            <ProceduralGrid cell={28} lineColor="rgba(94, 234, 212, 0.08)" />
-            <div className="scene-demo__swatches" role="list" aria-label="Surface materials">
-              {surfaceMaterials.map((material) => (
-                <SceneSurface
-                  key={material}
-                  material={material}
-                  role="listitem"
-                  className="scene-demo__swatch"
-                  title={material}
-                />
-              ))}
-            </div>
-            <div className="scene-demo__viz">
-              <SignalBars
-                barCount={7}
-                active={playing}
-                analyser={demo?.analyser ?? null}
-                className="scene-demo__bars"
-              />
-              <Button.Root size="sm" variant={playing ? 'outline' : 'solid'} onClick={toggleDemo}>
-                {playing ? 'Stop demo signal' : 'Start demo signal'}
-              </Button.Root>
-            </div>
-          </SceneRoot>
-
-          <div className="scene-demo__code">
-            <pre>
-              <code>{`import '@aeon-ui/surface/surface.css'
-import { SignalBars, SceneSurface } from '@aeon-ui/react-scene'
-import { attachMediaAnalyser } from '@aeon-ui/signal'`}</code>
-            </pre>
-          </div>
-        </div>
-
-        <div className="scene-demo panel scene-demo--3d">
-          <header className="scene-demo__3d-header">
-            <h3 className="scene-demo__3d-title">{site.scene3dTitle}</h3>
-            <p className="scene-demo__3d-lead">{site.scene3dLead}</p>
-          </header>
-
-          <SceneStage className="scene-3d-demo" minHeight={340} perspective={{ distance: 980, origin: '50% 36%' }}>
-            <SceneLayer part="sky" transform={{ z: -130 }}>
-              <ScenePlane
-                part="sky"
-                style={{
-                  background: 'linear-gradient(180deg, #243044 0%, #121820 55%, #0a0e14 100%)',
-                }}
-              />
-            </SceneLayer>
-
-            <SceneLayer part="back-wall" transform={{ z: -85 }}>
-              <ScenePlane part="back-wall" material="stone" style={{ opacity: 0.85 }} />
-            </SceneLayer>
-
-            <SceneLayer part="wall-left" transform={{ z: -55, rotateY: 42 }} origin="0% 100%">
-              <ScenePlane
-                part="wall-left"
-                wall="left"
-                material="brick"
-                fill={false}
-                style={{ width: '54%', height: '78%', bottom: 0, left: 0 }}
-              />
-            </SceneLayer>
-
-            <SceneLayer part="wall-right" transform={{ z: -55, rotateY: -42 }} origin="100% 100%">
-              <ScenePlane
-                part="wall-right"
-                wall="right"
-                material="brick"
-                fill={false}
-                style={{ width: '54%', height: '78%', bottom: 0, right: 0 }}
-              />
-            </SceneLayer>
-
-            <SceneLayer part="ground" transform={{ z: 0, rotateX: 56 }} origin="50% 0%">
-              <ScenePlane part="ground" material="gravel">
-                <SceneSlot
-                  part="board"
-                  transform={{ z: 28 }}
-                  style={{
-                    left: '14%',
-                    right: '14%',
-                    top: '22%',
-                    padding: '1rem 1.25rem',
-                    borderRadius: 8,
-                    background: 'rgba(18, 22, 28, 0.72)',
-                    border: '1px dashed rgba(94, 234, 212, 0.35)',
-                    color: 'var(--text-muted)',
-                    fontSize: '0.8rem',
-                    textAlign: 'center',
-                  }}
-                >
-                  Your UI mounts here — tables, HUD, controls
-                </SceneSlot>
-              </ScenePlane>
-            </SceneLayer>
-          </SceneStage>
-
-          <div className="scene-demo__code">
-            <pre>
-              <code>{`import '@aeon-ui/react-scene/scene-3d.css'
-import { SceneStage, SceneLayer, ScenePlane, SceneSlot } from '@aeon-ui/react-scene'`}</code>
-            </pre>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}