Implement New Cell Component

[kansalt]

Implement a universal Cell component that acts as a layout container composed of left, middle, and right content areas. The component is responsible only for layout paddings, states, and an optional top divider. All content is rendered via composable subcomponents.

What to do:

• Create the base Cell component with the following props:

https://www.figma.com/design/TnxqoNRnFN5JK1S1xt5CwT/v.-3.0--Unstoppable-Design-System?node-id=3629-8656&t=0UOywoHYgPgrgI2U-4

type: primary | secondary
state: default | pressed | disabled
topDivider: on | off — renders a 0.5px top divider
showLeft, left: visibility and content type of the left section
showMiddle, middle: visibility and layout of the middle section
showRight, right: visibility and content type of the right section

• Implement fixed paddings based on type:

primary: 16px top/bottom, 16px left/right
secondary: 8px top/bottom, 16px left/right

• Implement the top divider (topDivider) as a 0.5px full-width line (color from design system)

• Build all subcomponents for left, middle, and right sections. Each subcomponent should be reusable and independently configurable.

Implement Subcomponents:

• Left (Cell / Left)

https://www.figma.com/design/TnxqoNRnFN5JK1S1xt5CwT/v.-3.0--Unstoppable-Design-System?node-id=3967-79812&t=0UOywoHYgPgrgI2U-4

Available types:
Image
Container
Number
Selectors
Loader

• Middle (Cell / Middle)

https://www.figma.com/design/TnxqoNRnFN5JK1S1xt5CwT/v.-3.0--Unstoppable-Design-System?node-id=3967-79880&t=0UOywoHYgPgrgI2U-4

Available types:
Info

• Right (Cell / Right)

https://www.figma.com/design/TnxqoNRnFN5JK1S1xt5CwT/v.-3.0--Unstoppable-Design-System?node-id=3967-79965&t=0UOywoHYgPgrgI2U-4

Available types:
Navigation
Info
Controls
Selector

Behavior:
The layout adapts based on the presence of left, middle, and right sections
pressed: darkens the background
disabled: dims the content and disables interactivity
Paddings are constant and do not depend on content size