Scroll Area

function TintedTrays() {
  // Design system configuration
  const config = {
    canvas: '#FFFFFF',
    tray: '#F0F4F8',
    capsule: '#FFFFFF',
    primary: '#2563EB',
    text: '#334155',
  };

  const trayStyle = {
    background: config.tray,
    borderRadius: '32px',
    boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.02)',
  };

  const capsuleStyle = {
    background: config.capsule,
    borderRadius: '12px',
    border: '1px solid #E2E8F0',
    boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
  };

  return (
    <div style={{ background: config.canvas }}>
      <div style={trayStyle}>
        <div style={capsuleStyle}>
          {/* Content */}
        </div>
      </div>
    </div>
  );
}